Recently, I've delved into the world of html/css/javascript just for fun. I've encountered a little roadblock and I could use some help. In my html code, I'm trying to display two div elements on the same line but for some reason, it's not working.
The specific pairs of divs that I want to be on the same line and at the same height are the combinations of "button" and "text".
Below you can find the code snippet I'm working with:
html {
background-color: #e6eeff;
font-family: Verdana;
}
* {
border: 1px solid black;
}
#bgCal {
background-color: #004466;
color: white;
width: 500px;
margin: 0px auto;
border-radius: 10px;
padding: 10px 10px 10px 10px;
}
#display {
background-color: #d7d7c1;
color: black;
text-align: right;
width: 400px;
height: 100px;
font-size: 30px;
margin: 10px auto;
line-height: 100px;
border-radius: 5px;
}
#numberTot {
background-color: #d7d7c1;
vertical-align: middle;
line-height: normal;
margin-right: 5px;
}
.button {
background-color: #0099e6;
width: 150px;
height: 60px;
border-radius: 5px;
margin: 10px 50px;
display: inline-block;
text-align: center;
overflow: hidden;
}
.text {
background-color: #004466;
color: white;
height: 60px;
width: 180px;
margin: 10px 50px 10px 0px;
display: inline-block;
text-align: center;
font-size: 12px;
overflow: hidden;
}<div id="bgCal">
<div id="display">
<span id="numberTot"> 0 </span>
</div>
<button class="button" onclick="numberClick(1)">+</button>
<div class="text">
Every click increase of 1 the total number.
</div>
<br>
<button class="button" onclick="buyStudent()">
Buy Student
<br>Cost: <span id="studentLUCost">10</span>
<br>Students owned: <span id="studentLevel">0</span>
</button>
<div class="text">
A student can click instead of yourself, but they are slower.
<br>
<span id="studentProd">0</span> num/sec
</div>
</div>