如何使用CSS将HTML元素干净地放在同一行上

我的问题是如何将两个元素干净地放在同一条线上.

这是我的小提琴:https://jsfiddle.net/duqpn0wd/

CSS:

    .inline-block {
    display: inline-block;
    }

包装:

在小提琴中你可以看到一个带有按钮的文本,但是我需要它们左对齐并且右对齐如下:

文字按钮

现在使用inline-block有帮助,但我需要每个元素都是内联的,之后的行也是内联的,这样就可以合并到我现有的第一行中,如下所示:

文字按钮文字按钮

有关如何正确做到这一点的任何想法？

使用float: left;了p内部.inline-block:

.inline-block {
    display: inline-block;
    width: 100%;
 }
 .inline-block p{
   float: left;
 }

  
 Alarm 
  

    
Alarm Horn:
    
      OFF
      ON
    
  
  

    
Alarm Light:
    
      OFF
      ON
    
  



  
 Fault 
  

    Start Fault Time:
    100
    seconds