JSFiddle - React, Tailwind, and code Playground

by Cath_kb

HTML

<div class="container-fluid codeclub">
  <div class="row">
    <div class="col-xs-12">
      <form class="form-horizontal html-editor-form">

        <div class="form-group full-height-group">
        <textarea id="code-html" name="code-html" title="html editor" class="form-control">
        </textarea>
        </div>

        <div class="form-group">
          <label for="select" class="col-xs-offset-8 col-xs-2 control-label">Theme</label>
          <div class="col-xs-2">
            <select id="select-theme" class="form-control" title="select theme" onchange="selectTheme()">
              <option selected>default</option>
              <option>rubyblue</option>
              <option>the-matrix</option>
              <option>zenburn</option>
            </select>
          </div>
        </div>

      </form>
    </div>
  </div>
</div>

CSS

.form-horizontal {
  height: 300px;
  border: 1px solid red;
  display: flex;
  flex-direction:  column;
}
.form-group {
  width: 100%;
}
.full-height-group {
  flex-grow: 1;
  display: flex;
}