Css 让div填充该行并don'；不要互相推倒

需要帮助解决我自己解决不了的问题

我试图制作一个div，它是一个菜单，但是当文本变得太长时，它会将div向下推，我需要它们保持在原位，而不是获得更高的高度

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 {

}

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

html:

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

}

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

23
苏弗拉基
495韩元
比萨饼、汉堡包、黄瓜、西红柿
40
拉戈斯塔格兰尼奇意大利米饭和萨尔西纳意大利饺
9000韩元
用螃蟹和意大利乳清干酪做成的饺子。佐以来自哥特兰的小黄瓜和奶酪。虾仁、花生和南瓜

显示：内联块
*当您打开小提琴并将窗口调整为较小的宽度时，div结束，但在彼此下方*

有没有办法将蓝色、红色和绿色div放在同一行上，增加高度以适应文本？就像第一个例子一样

谢谢你试试这个

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

 FraceBox（参见<强> Head In Cloud < /强>的答案）可能是最好的解决方案，但您也可以考虑在<代码> > <菜> <代码>中添加<代码> %宽度>代码>（也可以是80%）（也可以添加<代码>垂直对齐：中间；< /代码>）：

。菜单项{
宽度：100%；
}
.菜单标题{
宽度：100%；
显示：块；
}
#数{
显示：内联块；
背景：蓝色；
颜色：#fff；
}
#盘子{
显示：内联块；
背景：红色；
宽度：80%；
垂直对齐：中间对齐；
}
#价格{
背景：绿色；
显示：内联块；
}
.菜单配料{
}
#配料{
}

23
苏弗拉基
495韩元
比萨饼、汉堡包、黄瓜、西红柿
40
拉戈斯塔格兰尼奇意大利米饭和萨尔西纳意大利饺
9000韩元
用螃蟹和意大利乳清干酪做成的饺子。佐以来自哥特兰的小黄瓜和奶酪。虾仁、花生和南瓜
试试
。菜单标题{
显示器：flex；
}


及
#盘{
柔性生长：1；
}

看
@Jonathan，这是一本必读的书，在我理解这个问题之前你已经回答了。。。在链接中有我的upx）非常好的信息。非常感谢我将学习*/欢迎来到Stack Overflow！寻求代码帮助的问题必须包含在问题本身中重现代码所需的最短代码。虽然您提供了一个链接，但如果链接无效，您的问题对其他将来遇到相同问题的用户没有任何价值。