Consider utilizing display: inline-flex to transform it into a flex container that displays like an inline element.
UPDATE: - I have included a demonstration highlighting the difference in display outcomes between the two types of flex layout. It's important to note that the flex behavior affects the children of the flex-container, and there is no variation in their arrangement between the two types of flex.
The disparity lies in how the parent container is rendered in relation to the page content. When using display: flex, the container appears as a block-level element with flexed children. Conversely, with display: inline-flex, the container behaves as an inline-level element with flexed children.
.flex-container {
display: flex;
align-items: center;
border :solid 1px red; /* just for illustration sake */
cursor: pointer;
padding: 0 8px;
}
.inline-flex-container {
display: inline-flex;
align-items: center;
border:solid 1px blue; /* just for illustration sake */
cursor: pointer;
padding: 0 8px;
}
.caret {
width: 0;
height: 0;
border-style: solid;
border-width: 5px 5px 0 5px;
border-color: #000000 transparent transparent transparent;
display: inline-block;
margin-left: 6px;
top: 0;
position: relative;
}
<p>Display: flex (causes a block-level parent container and flexed children)</p>
<div class="flex-container">
<button type="button">Button</button>
<span class="caret"></span>
</div>
<hr/>
<p>Display: inline-flex (causes an inline-level parent container and flexed children</p>
<div class="inline-flex-container">
<button type="button">Button</button>
<span class="caret"></span>
</div>