label under input

by chalcrow

HTML

<div class="scale-options">
      <div class="scale-yes">
        <Button>
          yes
        </Button>
      </div>
      <!-- TODO: Add <ScaleWeight /> component -->
      <div class="scale-weight">
          <input type="text" name="scaleWeight" value="24.5kg" disabled>
          <label for="scaleWeight" class="scale-weight-label">12.5</label>
      </div>
      <div class="scale-no">
        <Button>
          no
        </Button>
      </div>
  </div>

CSS

.scale-options {
    margin-top: 56px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    justify-content: space-between;
    width: 1100px;
  }
 
 .scale-yes, .scale-no, .scale-weight {
    display: inline-flex;
    justify-content: center;
  }

  .scale-yes, .scale-no {
    width: 313px;
  }

  .scale-weight input {
    width: 233px;
    display: block;
  }

  .scale-weight label {
    text-transform: uppercase;
    display: block;
    position: relative;
  }