Although this question has been asked previously, I am facing challenges in getting it to work for my specific scenario. My objective is to showcase a menu bar with a search option and inline text to its left. However, when I attempt to float both elements to the right, I struggle to achieve the desired order. You can view my code on jfiddle: https://jsfiddle.net/z8f890Ln/
To address this issue, I attempted utilizing containing divs and implemented the following code: HTML
<div class="right">
<span class="navbar-text">
Navbar text with an inline element
</span>
<div class="right-right">
<form>
<input class="form-control mr-sm-2" type="text" placeholder="Search">
<button class="btn btn-outline-success my-2 my-sm-0 button-arrow" type="submit">Search</button>
</form>
</div>
</div>
CSS
.right{
display: inline-block;
float: right;
}
.right .right-right{
float: right;
display: inline;
}