I am facing a challenge with my code. I am struggling to create the desired design where there are two columns and below them an input box that will be displayed when a button is pressed. The design I am aiming for can be viewed here: enter image description here Below is the HTML code I currently have:
<!DOCTYPE html>
<html>
<head>
<!--<link rel="stylesheet" type="text/css" href="raboti.css">-->
<h1>Calculator</h1>
<!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">-->
<link rel="stylesheet" type="text/css" href="withbootstat.css">
</head>
<body>
<div class="row">
<div class="dropDown" style="background-color: #efefef;">
<h2>Number of Employees:</h2>
<select id="mySelect">
<option value="1">1-10</option>
<option value="2">11-30</option>
<option value="3">31-80</option>
<option value="4">81-150</option>
<option value="5">151-300</option>
<option value="6">300+</option>
</select>
</div>
<div class="dropDown" id="monthCost" style="background-color: #efefef;">
<h2>Monthly Cost($):</h2> <input type="text" id="ourSum">
</div>
</div>
<div class="row1">
<div class="sum" id="finalSum">
The cost with us will be: <input class="hide type="text" id="result" >
<br><button type="button" onclick="sum()">Calculate</button>
</div>
</div>
</body>
</html>* {
box-sizing: border-box;
}
.dropDown {
float: left;
width: 50%;
padding: 10px;
height: 300px; /* Should be removed. Only for demonstration */
}
.row:after {
content: "";
display: table;
clear: both;
}
@media screen and (max-width:600px) {
.dropDown {
width: 100%;
}
}
h1 {
text-align: center;
}
.row1 {
margin-top: -200px;
margin-left: 100px;
}
.hide{
display:none;
}
.show{
display:block;
}