JSFiddle - React, Tailwind, and code Playground

by Josh Shields

HTML

<div class="pretend-modal">
<label class="label">Set Foo Foo: 
  <input type="text" class="right-col">
</label>

<label class="label">Calculated Foo Foo:
 <span class="right-col calculated-date">1/1/1</span>
</label>

<label class="label">Comments:
  <textarea class="comments-box"></textarea>
</label>
<div>Last modified by Calhoon McHoot 1-1-2005</div>
  <div class="buttons-container">
    <input type="button" value="Save">
    <input type="button" value="Cancel">
  </div>
</div>

CSS

.pretend-modal {
  width: 50%;
}

.label {
    margin-bottom: 1em;
    display: block;
}
.right-col {
  width: 50%;
  float: right;
}
.right-col:after {
  clear: both; /* FIXME do the clearfix hack correctly */
}
.calculated-date {
  text-align: right;
}

.comments-box {
  display: block;
  width: 100%;
  resize: vertical;
 
}
.buttons-container {
    text-align: center;
    margin-top: 10px;
}