JSFiddle - React, Tailwind, and code Playground

Field widths

by tonytlwu

HTML

<div class="box">
  <div class="field" style="float: left; width: 75%; opacity: 0.2">
    <label>Empty 75% placeholder</label>
    <input type="text" placeholder="Not a real input" />
  </div>  
  <div class="field" style="float: left; width: 25%;">
    <label>Application ID</label>
    <input type="text" placeholder="25%" />
  </div>
  <br class="clearfix" />
  <div class="field" style="float: left; width: 50%;">
    <label>First name</label>
    <input type="text" placeholder="50%" />
  </div>
  <div class="field" style="float: left; width: 50%;">
    <label>Last name</label>
    <input type="text" placeholder="50%" />
  </div>
  <br class="clearfix" />
</div>

CSS

.box {
  border: 1px solid black;
  width: 600px;
  padding: 10px;
}

label {
  display: block;
  width: 100%;
  margin-bottom: 4px;
}

input {
  width: 100%;
  line-height: 34px;
  height: 34px;
  box-sizing: border-box;
  padding: 0 10px;
}

.field {
  box-sizing: border-box;
  padding: 10px;
}

.clearfix {
  display: table;
  clear: both;
}