Html/css display two div on the same line don't work

Question

I've started to learn some html/css/javascript for fun and i'm stuck with a problem. In the html I want to display some pair of div on the same line, but i don't know why i can't do it.

The div that i want to show on the same line and at the same height are the couples of "button" and "text"

Here is my code!

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>

Answer 1

As Leo the lion suggested in the comments, you can simply put float:left and clear:both on your .button class to get the desired effect.

Clear is used to prevent floating elements from residing beside the element specified, in this case both left and right, and would push them below. There's an excellent QA about it here if you want to learn more.

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;
    float:left;
    clear:both;
}

.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>

Answer 2

Just add float:left to your .button class .button{ float:left;}

Answer 3

If you use inline-block, take a look at vertical-align

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;
  vertical-align:top;/* reset here vertical-align to next inline content: top, bottom, middle, 1em, etc ... */
}
.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>

Answer 4

You can just add

vertical-align: middle;

in css for both .button and .text classes.

I have made a fiddle link. You can check it - https://jsfiddle.net/1fm1cpqh/