JSFiddle - React, Tailwind, and code Playground

by alpacalips

HTML

<html>
<head></head>
<body>
<div id="formWrapper">
    <div id="primary_test-block">
        <dt id="primary_test-label">
            <label class="optional" for="primary_test">Primary test</label>
        </dt>
        <dd id="primary_test-element">
            <textarea cols="80" rows="3" id="primary_test" name="primary_test"></textarea>
        </dd>
    </div>
    <div id="sub_test-block" style="clear: both; float: left; width: 20%;">
        <dt id="sub_test-label">
            <label class="optional" for="sub_test">Subtest</label>
        </dt>
        <dd id="sub_test-element">
            <textarea cols="80" rows="3" id="sub_test" name="sub_test"></textarea>
        </dd>
    </div>
    <div id="in_form_suggest_sub_test_button-block" class="in_form_panel" style="float: left; width: 25%;">
        <button id="suggestDomain" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false"><span class="ui-button-text">Suggest Subtest</span></button>
    </div>
    <div id="secondary_test-block" style="clear: both;">
        <dt id="secondary_test-label">
            <label class="optional" for="secondary_test">Secondary test</label>
        </dt>
        <dd id="secondary_test-element">
            <textarea cols="80" rows="3" id="secondary_test" name="secondary_test"></textarea>
        </dd>
    </div>
</div><!--/#formWrapper-->
</body>
</html>

CSS

#formWrapper {
    position: relative;
    padding: 0 0 50px 0;
}
#in_form_suggest_sub_test_button-block {
    position: absolute;
    bottom: 0;
    left: 0;
}
input[type="text"], select, textarea {
    width: 200px;
}