Get divs to fill the line and don't push eachother down

Question

Need help with a problem I can't solve myself.

I'm trying to make a div which is a menu, but when text gets too long it pushes the divs down and I need them to stay in place and instead get more height.

css:

.menu-item {
  width: 100%;
}

.menu-title {
  width: 100%;
  display: block;
}
#number {
  display: inline-block;
  background: blue;
  color: #fff;
}
#dish {
  display: inline-block;
  background: red;
}
#price {
  background: green;
  display: inline-block;
}

.menu-ingredients {

}
#ingredients {

}

html:

<div class="menu-item">
  <div class="menu-title">
    <div id="number">23</div>
    <div id="dish">Souvlaki</div>
    <div id="price">495 kr</div>
  </div>
  <div class="menu-ingredients">
    <div id="ingredients">Pizza, hamburger, cucumber, tomato</div>
  </div>
</div>
<div class="menu-item">
  <div class="menu-title">
    <div id="number">40</div>
    <div id="dish">RAVIOLI CON PIPIENO DI GRANICHI E RICOTTA AL FINOCCHIO E SALSINA DI ARRAGOSTA

</div>
    <div id="price">9000 kr</div>
  </div>
  <div class="menu-ingredients">
    <div id="ingredients">Ravioli filled with crab and ricotta. Servec with minicucumber and cheese from Gotland. Shrimps toghether with peanuts and pumpkin</div>
  </div>
</div>

See fiddledisplay: inline-block; * When you open the fiddle and resize the window to a smaller width the divs end, but beneath each other *

Is there some way to get the blue, red and green div on the same line, increasing height to fit the text instead? Like in the first example

Thanks

Answer 1

Try this

.menu-title {
  width: 100%;
  display: -webkit-flex;
  display: flex;
}