JSFiddle - React, Tailwind, and code Playground

HTML

<form name="calculator" class="formtable">  
<div class="formrow"><label for="rcname">RC Name</label> <input type="text" name="rcname"></div>  
<div class="formrow"><label for="fps">FPS</label> <input type="text" name="fps">  </div>  
<div class="formrow"><label for="bitrate">Bitrate</label> <input type="text" name="bitrate">  </div>  
<div class="formrow"><label for="numberofcameras">Number of Cameras</label> <input type="text" name="numberofcameras"> </div>   
<div class="formrow"><label for="encoding">Encoding</label> <select name="encoding" id="encodingoptions">
  <option value="h264">H.264</option>
  <option value="mjpeg">MJPEG</option>
  <option value="mpeg4">MPEG4</option>
</select></div>  
Total Storage: <input type="text" name="totalstorage">   
Total Bandwidth: <input type="text" name="totalbandwidth">   
<input type="button" value="totalbandwidthresult" onclick="javascript:totalbandwidth();">

CSS

form.formtable {
display:table;
}   

div.formrow {
display:table-row;
}

label, input {
display:table-cell;
}

#encodingoptions{
width:100%;
}

JavaScript

function totalbandwidth(){  
var fps=Number(document.calculator.fps.value);  
var bitrate=Number(document.calculator.bitrate.value);  
var numberofcameras=Number(document.calculator.numberofcameras.value); 
var encoding=document.calculator.encoding.value; 
if (encoding="mjpeg")
{
storage = bitrate*fps;
}
else
{
storage = bitrate;
}

totalbandwidth = (numberofcameras*storage)/1000;
document.calculator.totalbandwidthresult.value=totalbandwidth;  
}