How to cleanly put HTML elements on the same line using CSS

Question

My question is how to cleanly put two elements on the same line.

Here is my fiddle: https://jsfiddle.net/duqpn0wd/

CSS:

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

Wrapper:

    <div class="inline-block">
    </div>

In the fiddle you can see a text with a button underneath it but I need them to be left align and right align like so:

TEXT BUTTON

Right now using inline-block helps but I would need each element to be an inline and the line after that would also be inline so that would merge into my existing first line like so:

TEXT BUTTON TEXT BUTTON

Any ideas on how to do this properly?

Answer 1

Use float: left; for the p inside .inline-block :

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

 <link href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> <div data-role="collapsible"> <h3> Alarm </h3> <div class="inline-block"> <p>Alarm Horn:</p> <select name="flipswitch-1" id="flipswitch-1" data-role="flipswitch" data-wrapper-class="wide-flipswitch"> <option value="off">OFF</option> <option value="on">ON</option> </select> </div> <div class="inline-block"> <p>Alarm Light:</p> <select name="flipswitch-2" id="flipswitch-2" data-role="flipswitch" data-wrapper-class="wide-flipswitch"> <option value="off">OFF</option> <option value="on">ON</option> </select> </div> </div> <div data-role="collapsible"> <h3> Fault </h3> <div class="inline-block"> <label for="number-input-1">Start Fault Time:</label> <button id="number-input-1" class="keyboard-input" data-inline="true">100</button> <label for="number-input-1">seconds</label> </div> </div> 

Answer 2

Just add this code to your CSS

.inline-block > p {
  float: left;
}

Answer 3

Just modify your css with this

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

 <link href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> <div data-role="collapsible"> <h3> Alarm </h3> <div class="inline-block"> <p>Alarm Horn:</p> <select name="flipswitch-1" id="flipswitch-1" data-role="flipswitch" data-wrapper-class="wide-flipswitch"> <option value="off">OFF</option> <option value="on">ON</option> </select> </div> <div class="inline-block"> <p>Alarm Light:</p> <select name="flipswitch-2" id="flipswitch-2" data-role="flipswitch" data- wrapper-class="wide-flipswitch"> <option value="off">OFF</option> <option value="on">ON</option> </select> </div> </div> <div data-role="collapsible"> <h3> Fault </h3> <div class="inline-block"> <label for="number-input-1">Start Fault Time:</label> <button id="number-input-1" class="keyboard-input" data- inline="true">100</button> <label for="number-input-1">seconds</label> </div> </div> 

Answer 4

You can specify your CSS as :

.inline-block { /* select the class */
display: inline-block;
}

.inline-block *{ /* select all the child element  */
 display: inline-block;
}

Adding any element to your class will be aligned in a single line.