HTML input with units

by Génesis García Morilla

HTML

<div>
  <span><input placeholder="Total" type="number" min="0" value="50">€</span>
  <span><input placeholder="Add" type="number" min="0">€</span>
  <span><input placeholder="Price" type="number" min="0" value="1">€/kWh</span>
</div>

CSS

* {
  font-family: Roboto;
  color: #252525;
}

div {
  display: flex;
  flex-wrap: wrap;
}

span {
  background: white;
  border: 1px solid #e8e8e8;
}

input {
  background: inherit;
  outline: none;
  border: none;
  padding: 0 5px;
}