Make a div with buttons inline

Question

How do you make a Div with 2 buttons become inline?

 <div> <h2 id="break-label"> Break Length </h2> <div id="button"> <button id="break-decrement"> handleClickBreakDecrement </button> <p id="break-length"> 5 minutes or something </p> <button id="break-increment"> handleClickBreakIncrement </button> </div> </div> 

The div with the ID="button" must be inline like this:

   **handleClickBreakDecrement** 5 minutes or something **handleClickBreakIncrement**

Instead of this:

  **handleClickBreakDecrement** 
5 minutes or something 
**handleClickBreakIncrement**

I tried using display : inline but nothing happened

Answer 1

The paragraph element ( <p>...</p> ) between your two buttons is a block-level element, which accounts for the behavior you're witnessing.

To fix, either set display: inline on the paragraph element, or replace it with an inline element like <span>...</span> :

 <div> <h2 id="break-label"> Break Length </h2> <div id="button"> <button id="break-decrement">handleClickBreakDecrement</button> <span id="break-length"> 5 minutes or something </span> <button id="break-increment">handleClickBreakIncrement</button> </div> </div> 

Answer 2

To make the inner buttons and paragraph render on the same line, you can set their CSS property display as inline-block , like the following snippet:

 #button > button, p { display: inline-block; } 

 <div> <h2 id="break-label"> Break Length </h2> <div id="button"> <button id="break-decrement"> handleClickBreakDecrement </button> <p id="break-length"> 5 minutes or something </p> <button id="break-increment"> handleClickBreakIncrement </button> </div> </div> 

Answer 3

Three feasible ways to achieve:

 #button { display: flex; } 

 <div> <h2 id="break-label"> Break Length </h2> <div id="button"> <button id="break-decrement"> handleClickBreakDecrement </button> <p id="break-length"> 5 minutes or something </p> <button id="break-increment"> handleClickBreakIncrement </button> </div> </div> 

 #button button, #button p { display: inline; } 

 <div> <h2 id="break-label"> Break Length </h2> <div id="button"> <button id="break-decrement"> handleClickBreakDecrement </button> <p id="break-length"> 5 minutes or something </p> <button id="break-increment"> handleClickBreakIncrement </button> </div> </div> 

 #button { overflow: hidden; } #button button, #button p { float: left; } 

 <div> <h2 id="break-label"> Break Length </h2> <div id="button"> <button id="break-decrement"> handleClickBreakDecrement </button> <p id="break-length"> 5 minutes or something </p> <button id="break-increment"> handleClickBreakIncrement </button> </div> </div>