Html 如何将其放入水平内联块中？

我有一个我想要的内联块，但水平。现在它作为内联块工作，但垂直

这是我的HTML

<div class="ondisplay">
            <div class="left-text">
                <p>Newest</p>
            </div>
            <div class="toggle">    
                <input type="checkbox" value="yes" id="toggle" name="check" />
                <label for="toggle"></label>
            </div>
            <div class="right-text">
                <p>Most Popular</p>
            </div>
        </div>

还可以将内联块添加到子div，以便它们在一行中对齐，并且父内联块将给出精确的子级

.ondisplay{ 文本对齐：居中； 显示：内联块； } .ondisplay分区{ 显示：内联块； } 最新的

最受欢迎

.ondisplay {
    text-align:center;
    display: inline-block;
  }