JSFiddle - React, Tailwind, and code Playground
HTML
<div id="main">
<div id="rightcol">
Right Col
<div id="editmain">
<a href="#" id="AddBtn">Add</a> <a href="#" id="SaveBtn">Save</a> <a href="#" id="CancelBtn">
Cancel</a>
<div class="ticker">
<label class="tickertypelabel" for="tickertype1">
Type1:</label>
<select class="tickertype" id="tickertype1">
<option value="Text">Text</option>
<option value="RSS">RSS</option>
</select>
<br />
<label class="tickertxtlabel" for="tickertxt1">
Text1:</label>
<input class="tickertxt" type="text" maxlength="500" id="tickertxt1" />
</div>
<div class="ticker">
<label class="tickertypelabel" for="tickertype2">
Type2:</label>
<select class="tickertype" id="tickertype2">
<option value="Text">Text</option>
<option value="RSS">RSS</option>
</select>
<br />
<label class="tickertxtlabel" for="tickertxt2">
Text2:</label>
<input class="tickertxt" type="text" maxlength="500" id="tickertxt2" />
</div>
<div class="ticker">
<label class="tickertypelabel" for="tickertype3">
Type3:</label>
<select class="tickertype" id="tickertype3">
<option value="Text">Text</option>
<option value="RSS">RSS</option>
</select>
<br />
<label class="tickertxtlabel" for="tickertxt3">
Text3:</label>
<input class="tickertxt" type="text" maxlength="500" id="tickertxt3" />
<br />
<label class="tickertxt1label" for="tickertxt31">
Text3-1:</label>
<input class="tickertxt1" type="text" maxlength="500" id="tickertxt31" />
</div>
<div class="ticker">
<label class="tickertypelabel" for="tickertype4">
Type4:</label>
<select class="tickertype" id="tickertype4">
<option value="Text">Text</option>
<option value="RSS">RSS</option>
</select>
<br />
<label class="tickertxtlabel" for="tickertxt4">
Text4:</label>
<input class="tickertxt" type="text" maxlength="500" id="tickertxt4"...
CSS
#main
{
position:relative;
width:510px;
background-color:Red;
min-height:500px;
margin: 10px auto 10px auto;
}
#rightcol
{
width:500px;
background-color:#edf;
min-height:500px;
}
#editmain
{
position:relative;
min-height:480px;
background-color:#84d;
overflow:hidden;
padding: 20px 0px 30px 0px;
}
#editmain #AddBtn
{
position:absolute;
float:right;
top:0px;
right:0px;
}
#editmain #SaveBtn
{
position:absolute;
float:left;
bottom: 10px;
left:60px;
}
#editmain #CancelBtn
{
position:absolute;
float:right;
bottom:10px;
right:60px;
}
.ticker
{
position:relative;
border-bottom: solid 2px #ddd;
margin:10px;
background-color:white;
overflow:hidden;
height:auto;
min-height:30px;
}
.tickertypelabel
{
border:1px solid pink;
display:inline-block;
margin: 10px 10px 10px 10px;
width:90px;
}
.tickertype
{
margin: 10px 10px 10px 10px;
width:100px;
}
.tickertxtlabel
{
border:1px solid pink;
display:inline-block;
margin: 10px 10px 10px 10px;
width:90px;
}
.tickertxt
{
margin: 10px 10px 10px 10px;
width:100px;
}
.tickertxt1label
{
border:1px solid pink;
display:inline-block;
margin: 10px 10px 10px 10px;
width:90px;
}
.tickertxt1
{
margin: 10px 10px 10px 10px;
width:100px;
}