JSFiddle - React, Tailwind, and code Playground

by Jools Chadwick

HTML

<div class="section">
  <div class="sectionheading">
  Sorting
  </div>
  <div class="option">
  <label class="checkboxlabel">
    <input type="checkbox"/>
    Automatically sort bars
  </label>
  </div>
    <div class="option">

  <label class="checkboxlabel">
    <input type="checkbox"/>
    Reverse order
  </label>
  </div>
</div>

<div class="section">
  <div class="sectionheading">
  X-axis
  </div>
  <div class="option">
    <label>Rotate axis labels:</label>
    <div class="rhsfields block370">
      <label class="radiolabel block250">
        <input type="radio" name="rotateaxislabels"/>
        auto
      </label>
        <label class="radiolabel block250">
        <input type="radio" name="rotateaxislabels"/>
        always
      </label>
        <label class="radiolabel block250">
        <input type="radio" name="rotateaxislabels"/>
        never
      </label>
    </div>
  </div>
</div>

<div class="section">
  <div class="sectionheading">
  Y-axis
  </div>
  <div class="option">
    <label class="checkboxlabel">
      <input type="checkbox"/>
      Use same scale for all columns
    </label>
  </div>
  <div class="option">
    <label class="lhslabel">Custom range</label>
    <div class="rhsfields block270">&#8203;
      <input id="customrange-1" class="input inputleft">
       <input id="customrange-2" class="input inputright">
    </div>

  </div>
  <div class="option">
    <label class="lhslabel">Custom ticks</label>
    <div class="rhsfields block270">
      <input id="customticks" class="input">
    </div>

  </div>
  <div class="option">
    <label class="lhslabel">Number format</label>
    <div class="rhsfields block270">
      <input type="text" list="nooformats" class="input"/>
      <datalist id="nooformats">
        <option value="1,000[.00]">
        <option value="0">
        <option value="0.00">
        <option value="0.000">
      </datalist>    
    </div>

  </div>
  <div class="option">
    <label...

CSS

body{
  font-family: Arial, sans-serif;
  font-size: 11pt;
}

.sectionheading{
  font-weight: bold;
  padding-bottom: 5px;
}
.section{
  padding-bottom:10px;
}
.checkboxlabel{
  display:block;
}
.lhslabel{
  display:inline-block;
  width:110px;
  margin-bottom: 3px;
}
.rhsfields{
  display:inline-block;
  width:calc(100% - 130px);
  max-width: 225px;
}
.input{
  width:100%;
  max-width:100%;
  box-sizing: border-box;
}
.inputleft, .inputright{
  max-width:calc(50% - 3px);
}
.inputleft{
  float:left;
}
.inputright{
  float: right;
}
.option{
  clear:all;
  padding-bottom:10px;
}

@media only screen and (max-width: 370px) {
  .block370 {
    display: block;
    max-width: 100%;
    width:100%
  }
}
@media only screen and (max-width: 270px) {
  .block270 {
    display: block;
    max-width: 100%;
    width:100%
  }
}
@media only screen and (max-width: 250px) {
  .block250 {
    display: block;
    max-width: 100%;
    width:100%
  }
}

JavaScript

$('input').on('change', function(){
	console.log($(this).closest('.option')[0].id+':'+this.value);
  })