JSFiddle - React, Tailwind, and code Playground
HTML
<fieldset style="position: relative">
<legend>The legend is legendary</legend>
<table>
<tr>
<td>this a table - there are a lot of fields in here</td>
</tr>
<tr>
<td>each row is different enough that trying to use divs would have been a freakin' nightmare</td>
</tr>
<tr>
<td>The save button below is what I want to always be in the bottom right of the fieldset</td>
</tr>
</table>
<div class="lower-Right-Button">
<input type="submit" class="button" value="Save">
<input type="submit" class="button" value="New" style="margin-right: 10px">
</div>
</fieldset>
CSS
body
{
color: #333;
font-size: .85em;
font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
vertical-align: baseline;
}
#container{
width: 100%;
padding: 0;
}
#centerstripe{
width: 960px;
height: 100%;
margin: auto;
background-color: #e2e2e2;
}
#header{
width: 960px;
height: 180px;
margin: auto;
}
#headerlogo{
width: 150px;
margin: auto;
float: left;
}
#headermenu{
width: auto;
height: 170px;
display: table-cell;
vertical-align: bottom;
}
#content{
width: 960px;
min-height: 500px;
margin: auto;
}
#leftmenu{
width: 150px;
float: left;
padding-left: 7px;
padding-top: 5px;
min-height: 498px;
}
#maincontent{
width: auto;
min-height: 500px;
}
#footer{
clear: both;
font-size: .8em;
width: 960px;
text-align: right;
margin: auto;
height: 500px;
}
.inlinemenu{
float: left;
margin-left: 10px;
}
fieldset{
min-height: 500px;
}
fieldset legend{
font-weight: bold;
}
ul{
padding-left: 0;
}
.lower-Right-Button{
position: absolute;
bottom: 0;
right: 0;
}
.button {
min-width: 100px;
}