Как я могу поместить это в горизонтальный встроенный блок?

Question

У меня есть это, я хочу его встроенный блок, но горизонтальный. Теперь он работает как встроенный блок, а вертикальный.

Это мой 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> 

Это мой CSS

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

Answer 1

добавить inline-block детям div's так, что они выравнивают в одной строке и родителем inline-block будет дать точный детям

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

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