JSFiddle - React, Tailwind, and code Playground

by spikesagal

HTML

<form>
   <ul class="two-column">
      <li>
         <label for="id-postcode">Postcode:</label>
         <input type="text" name="postcode" id="id-postcode">
      </li>
      <li>
         <span>
            <label for="id-latitude">Latitude:</label>
            <input type="number" name="latitude" id="id-latitude">
         </span>
         <span>
            <label for="id-longitude">Longitude:</label>
            <input type="number" name="longitude" id="id-longitude">
         </span>
         <span>
            <a id="lookup-lat-long"><span class="icon location"></span>Lookup</a>
         </span>
      </li>
   </ul>
</form>

SCSS

//forms.scss

form {   
   li {
      list-style: none;
   }
  
   label {
      display: inline-block;
      margin-bottom: 8px;
   }

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

   ul {
      $cellPadding: 20px;

      &.two-column > li {
         width: calc(50% - #{$cellPadding}/2);

         &:nth-of-type(odd) {
            float: left;
            clear: left;
         }

         &:nth-of-type(even) {
            float: right;
            clear: right;
         }

         > span:not(.helptext) {
            display: table-cell;
            vertical-align: bottom;

            &:not(:last-child) {
               padding-right: $cellPadding;
            }
         }
      }
   }
}

// icons.scss
.icon {
   &.location:before {
      content: "▼";
   }
}

// location-information.scss
#lookup-lat-long {
   text-align: center;

   .icon {
      display: block;
   }
}