JSFiddle - React, Tailwind, and code Playground

by aaronj1335

HTML

<div class=create-fileplan>
  <form>

    <div class=left>
      <label>
        File plan name*
        <input type=text name=name />
      </label>

      <label>
        Description
        <textarea name=description></textarea>
      </label>

      <em>*Required</em>
    </div>

    <div class=right>
      <label>
        Number of series*
        <input type=text name=number_of_series />
      </label>

      <label>
        Default series name*
        <input type=text name=default />
      </label>

      <button name=series-format-details>Details</button>

      <label class=checkbox>
        <input type=checkbox name=insert_incremental_number checked=true />
        Insert incremental number
      </label>
    </div>

    <div class=ok-cancel>
      <input type=submit name=OK />
      <a href="javascript:void(0)">Cancel</a>
    </div>

  </form>
</div>

CSS

.create-fileplan .left,
.create-fileplan .right {
    display: inline-block;
    border: 0;
    margin: 0;
    width: 49%;
    vertical-align: top;
}

.create-fileplan form {
    padding: 12px;
}

.create-fileplan form input,
.create-fileplan form textarea {
    display: block;
    margin-top: 3px;
    width: 100%;
    padding: 3px;
}

.create-fileplan label {
    font-weight: bold;
    display: block;
    margin-bottom: 12px;
    margin-right: 18px;
}

.create-fileplan .left label {
    margin-right: 24px;
}

.create-fileplan form input[type=checkbox],
.create-fileplan form label.checkbox {
    display: inline;
    font-weight: normal;
    width: auto;
}

.create-fileplan p {
    font-weight: bold;
}

.create-fileplan .right button {
    float: right;
}

.create-fileplan .ok-cancel {
    margin-top: 12px;
    line-height: 18px;
}

.create-fileplan .ok-cancel input,
.create-fileplan .ok-cancel a {
    display: inline;
    float: right;
    width: auto;
}