как сделать div в одном боксе бок о бок для ввода валюты

Question

как сделать коробку как выше? в чистом виде css без boostrap

почему я спросил об этом, потому что я не использую bootstrap 4 и не могу найти способ использовать его с boostrap 3, я пытался сделать один, но это была коробка, похожая на колонну вниз

вот мой css:

.currency {
  white-space: nowrap;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  float:left;
  border: 2px solid;
}

и мой htlm

<div>
  <label class="currency"></label>
  <input type="text"> 1000
</div>

Answer 1

Обертка может быть элементом label, знак валюты может быть псевдоэлементом ::before, который может прочитать атрибут data-* на самой метке.

label {
   border: 2px #ccc solid;
   border-radius: .5em;
   display: inline-flex;
   color: #666;
   overflow: hidden;
   font: 2rem Verdana;
}

label:before {
   content: attr(data-currency);
   width: 2.5em;
   padding: .5em 0;
   background: #e6e6e8;
   text-align: center;
   font: inherit;
   border-right: inherit;
}

input {
   border: 0;
   padding: .25em .75em;
   font: inherit;
   color: inherit;
}

<label aria-label="Enter the amount in €" data-currency="€">
   <input type="text" />
</label>

Answer 2

<div class="input-group">
  <span class="input-group-addon" id="basic-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>

этот код использует bootstrap 3, поэтому, если хотите, попробуйте