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 layered">
        <div class="controls-x">
            <button>X+</button>
            <br/>
            <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;
}