grids and columns

by needlethread

HTML

<div id="tt_editpane_ul" data-id="62" data-datatype="hop">
    <div class="ui-grid-a" data-fieldname="name">
        <div class="ui-block-a tt_editpane_left">Name</div>
        <div class="ui-block-b tt_editpane_right">
            <label for="tt_editpane_name">Name</label>
            <input type="text" data-id="62" id="tt_editfield_name" name="name" class="tt_editfield_name tt_watch" value="Boadicea" data-watcho="Boadicea">
        </div>
    </div>
    <div class="ui-grid-a" data-fieldname="owner">
        <div class="ui-block-a tt_editpane_left">Owner</div>
        <div class="ui-block-b tt_editpane_right">
            <label for="tt_editpane_owner">Owner</label>
            <input type="text" data-mini="true" data-id="62" id="tt_editfield_owner" name="owner" class="tt_editfield_owner tt_watch tt_autocomplete" value="Dan Temple" data-watcho="Dan Temple" data-restore="Dan Temple" data-ftype="user">
            <div class="tt_autocomplete_wrap">
                <ul class="jqm_autocomplete" data-role="listview" data-inset="true" data-ftype="user"></ul>
            </div>
            <input type="text" data-id="62" data-fname="uid" class="tt_autoindex" data-role="none" value="101">
        </div>
    </div>
    <div class="ui-grid-a" data-fieldname="groupname">
        <div class="ui-block-a tt_editpane_left">Group</div>
        <div class="ui-block-b tt_editpane_right">
            <label for="tt_editpane_groupname">Group</label>
            <input type="text" data-mini="true" data-id="62" id="tt_editfield_groupname" name="groupname" class="tt_editfield_groupname tt_watch tt_autocomplete" value="ertertret" data-watcho="ertertret" data-restore="ertertret" data-ftype="group">
            <div class="tt_autocomplete_wrap">
                <ul class="jqm_autocomplete" data-role="listview" data-inset="true" data-ftype="group"></ul>
            </div>
            <input type="text" data-id="62" data-fname="gid" class="tt_autoindex" data-role="none" value="2">
       ...

CSS

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  border: 0;
  font-size: 100%;
  font: inherit;
  margin: 0;
  padding: 0;
  vertical-align: baseline; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after, q:before, q:after {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

button, input, select, textarea {
  font-size: 100%;
  overflow: visible;
  margin: 0;
  vertical-align: baseline;
  width: auto; }

textarea {
  overflow: auto;
  vertical-align: text-top; }

div#malts h4 a {
  background-color: sienna;
  color: white;
  text-shadow: none; }

div#malt_area {
  background-color: tan; }

div#hops h4 a {
  background-color: darkgreen;
  color: white;
  text-shadow: none; }

div#boil_area {
  background-color: lightgreen; }

.ui-controlgroup-horizontal div.ui-controlgroup-controls > button.bc_prefix {
  text-align: right;
  width: 4em; }
.ui-controlgroup-horizontal div.ui-controlgroup-controls > button.bc_prefix_wide {
  text-align: right;
  width: 6em; }
.ui-controlgroup-horizontal div.ui-controlgroup-controls > div.bc_field_wide {
  width: 30em; }

div.ui-controlgroup-controls {
  width: 100%; }

div.ui-controlgroup.bc_inline {
  display: inline-block; }

button.bc_suffix {
  text-align: left;
  min-width: 40px; }

button.bc_field_int {
  text-align: right;
  min-width: 3em;...