JSFiddle - React, Tailwind, and code Playground
HTML
<form>
<fieldset class="pos-review">
<div class="controls">
<button class="reset">0</button>
<label>X</label>
<input type="text"></input>
</div>
<div class="controls">
<button class="reset">0</button>
<label>Y</label>
<input type="text"></input>
</div>
<div class="controls">
<button class="reset">0</button>
<label>Z</label>
<input type="text"></input>
</div>
</fieldset>
<fieldset class="pos-inputs">
<div class="controls-x">
<button>X+</button>
<button>X-</button>
</div>
<div class="controls-y">
<button>Y+</button>
<button>Y-</button>
</div>
<div class="controls-z">
<button>Z+</button>
<button>Z-</button>
</div>
</fieldset>
<fieldset class="pos-inputs reduced">
<div class="controls-z">
<button>Z+</button>
<button>Z-</button>
</div>
</fieldset>
<fieldset class="pos-params">
<div class="controls">
<label>FeedRate</label>
<input type="text"></input>
</div>
<div class="controls">
<label>Increment</label>
<input type="text"></input>
</div>
</fieldset>
</form>
CSS
fieldset.pos-review,
fieldset.pos-inputs,
fieldset.pos-params{
display:block;
float:left;
position:relative;
height:0px;
padding:0 0 25% 0;
margin:0;
-webkit-box-sizing:border-box;
}
fieldset.pos-review{
width:30%;
}
fieldset.pos-inputs{
width:25%;
}
fieldset.pos-inputs.reduced{
width:10%;
}
fieldset.pos-params{
width:35%;
}
.controls-x>button,
.controls-y>button,
.controls-z>button{
position:absolute;
}
.controls-x>button{
left:50%;
-webkit-transform:translateX(-50%);
}
.controls-y>button{
top:50%;
-webkit-transform:translateY(-50%);
}
.controls-x>button:first-child{
top:0;
}
.controls-x>button:last-child{
bottom:0;
}
.controls-y>button:first-child{
left:0;
}
.controls-y>button:last-child{
right:0;
}
.controls-z>button:first-child{
right:0;
top:0;
}
.controls-z>button:last-child{
left:0;
bottom:0;
}