JSFiddle - React, Tailwind, and code Playground

by Darren Galway

HTML

<div>
  <div class="input">
    <div class="icon">Cups</div>
    <input type="text">
  </div>

  <div class="input">
    <div class="icon">kg</div>
    <input type="text">
  </div>
  
  <div class="input">
    <div class="icon">g</div>
    <input type="text">
  </div>
</div>

SCSS

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  font-family: sans-serif;
}

.input {
  position: relative;
  
  &:not(:last-of-type) {
    margin-bottom: 1rem;
  }

  .icon {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    padding: 1rem;
    font-size: 12px;
    line-height: 12px;
    color: #2b2b2b;
    width: 30px;
    text-align: right;
  }
  
  input {
    padding: 1rem;
    padding-right: calc(30px + 1rem);
    border: 0;
    background: #eee;
    border-radius: 4px;
    width: 200px;
  }
}