Place four elements inside div next to each other, with different widths - html

Question

I am attempting to put four elements next to each other inside a container div; which all are a different width.
This is my desired outcome:
Unfortunately, this is what it looks like at the moment:
.container {
width: 100%;
background: blue;
padding: 10px;
}
p {
margin: 0px;
color: #fff;
font-size: 30px;
width: 11%;
float: left;
}
button {
float: right;
}
<div class="container">
<p>Title</p>
<form>
<input type="text" class="input">
</form>
<button>Apple</button>
<button>Orange</button>
<div style="clear: both;"></div>
</div>
JsFiddle: https://jsfiddle.net/uLL708jg/
Would Flex work for this? If so, could someone show me in an answer?

Answer 1

Yes, flexbox could solve this. This is just a basic setup. On .container, put a display: flex; and remove all the floats. Then wrap the buttons in a div (.right here) and give it margin-left: auto; to park it on the right of the screen.
Edit
justify-content: space-between; will align the three items so that there's space between the items and so the search will be in the middle of the div .container. No need anymore of margin-left: auto;, though the div wrapper around it is needed. Read more about flexbox and how to use it at MDN.
.container {
display: flex;
width: 100%;
background: blue;
padding: 10px;
flex-flow: row wrap;
align-items: center;
justify-content: space-between;
}
p {
margin: 0px;
color: #fff;
font-size: 30px;
width: 11%;
}
<div class="container">
<p>Title</p>
<form>
<input type="text" class="input">
</form>
<div class="right">
<button>Apple</button>
<button>Orange</button>
</div>
</div>