JSFiddle - React, Tailwind, and code Playground
HTML
<div style="min-width:400px">
<h1>Please select the action you would like to perform</h1>
<div class="container">
<div class="child" style="background: #EEE;width:250px;">
<fieldset >
<legend>
Project Actions
</legend>
<table class="fieldset_table">
<tbody><tr><td>
<label id="option_1_label" for="option_1" class="">
<input class="not implemented" type="radio" checked="checked" name="FORMVARS[next]">Request Infrastructure Creation</label>
</td>
</tr>
<tr><td>
<label id="option_2_label" for="option_2" class="">
<input class="not implemented" type="radio" name="FORMVARS[next]">Request Infrastructure Extension
</label>
</td>
</tr>
<tr>
<td>
<label id="option_3_label" for="option_3" class="">
<input class="implemented" type="radio"name="FORMVARS[next]">Request Project Manager Change
</label>
</td>
</tr>
</tbody></table>
<button id="next" style="float:right">Next</button>
</fieldset></div>
<div class="child">
<fieldset >
<legend>
Main menu
</legend>
<table class="fieldset_table">
<tbody><tr><td>
<label id="option_1_label" for="option_1" class=""><input type="radio" checked="checked" name="FORMVARS[next]">Request Infrastructure Creation</label>
</td>
</tr>
<tr><td>
<label id="option_2_label" for="option_2" class="">
<input type="radio" name="FORMVARS[next]">Request Infrastructure Extension
</label>
</td>
</tr>
<tr>
<td>
<label id="option_3_label" for="option_3" class="">
<input type="radio"name="FORMVARS[next]">Request Project Manager Change
</label>
</td>
</tr>
<tr>
<td>
<label id="option_4_label" for="option_4" class="">
<input type="radio"name="FORMVARS[next]">Request Project Permission...
CSS
.container {
border: 1px dashed #ccc;
position: relative;
text-align: center;
min-width : 380px;
}
.child {
margin : auto;
background: #CCC;
margin-top : 5px;
display : inline-block;
}
fieldset{
height: 150px;
}
}
JavaScript
function init_menu(){
if($(".container").width() > 910){
$(".child").width(300);
} else if ($(".container").width() < 400){
$(".child").width(300);
}
else {
$(".child").width(($(".container").width() - 40));
}
}
$( window ).resize(function() {
init_menu()
});
$(".not.implemented").on("click",function(){
if ($("#warm").is(":hidden")) {
$("#warm").toggle();
}
$("#implement_msg").show();
$("#vote").show();
$("#vote_confirm2").show();
$("#vote_confirm").hide();
$("#next").prop("disabled", true);
});
$(".implemented:not(.not)").on("click",function(){
if ($("#warm").is(":visible")) {
$("#warm").toggle();
}
$("#next").prop("disabled", false);
});
$("#vote").on("click",function(){
$("#implement_msg").hide();
$("#vote").hide();
$("#vote_confirm").show();
});
$( document ).ready(function() {
init_menu()
});