Make a div with buttons inline - html

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>