CSS - objects aren't in one row - html

Question

I want to have these objects in one row
My HTML code looks like this:
<input type="button" class="formreturn" value="Copy Url" onclick="Copy();" />
<label><input type="text" class="txtfilename" id="op-text-filename" placeholder="type file name"/>.txt</label>
<button type="button" class="formreturn" onclick="saveURLtoTXTfile();"><span class="glyphicon glyphicon-download"></span>.TXT</button>
<button class="excelsubmit" onclick="exportData()"><span class="glyphicon glyphicon-download"></span>.CSV</button>
<button id="btnExport" class="excelsubmit" onclick="fnExcelReport();"><span class="glyphicon glyphicon-download"></span>.XLS </button>
and CSS
.formreturn {
font-weight:700;
text-decoration: none;
display:inline-block;
color:black;
background:#c6e2f2;
padding: 9px;
border-radius: 3px;
}
.copyurltext {
font-weight: bold;
margin-left: 30px;
}
.txtfilename {
display: inline-block;
float: left;
padding: 5px;
}
.excelsubmit {
font-weight:700;
float: right;
padding: 8px;
background:#c6e2f2;
}
If I place the float:left in my formreturn, then everything is fine, but the order is wrong, as the .txt button goes next to the "Copy Url" button. I want to have the order as you see below, but with everything lined up properly.
I tried something like here:
http://jsfiddle.net/A9Ap7/1/
codeproject.com/Questions/5280800/How-do-I-put-everything-in-one-line
and here
css everything on same line
but it didn't work for me
How can I fix this?

Answer 1

Try this:
<div class="container">
<div classs="btns-left">
<input type="button" class="formreturn" value="Copy Url" onclick="Copy();" />
<label><input type="text" class="txtfilename" id="op-text-filename" placeholder="type file name"/>.txt</label>
<button type="button" class="formreturn" onclick="saveURLtoTXTfile();"><span class="glyphicon glyphicon-download"></span>.TXT</button>
</div>
<div class="btns-right">
<button class="excelsubmit" onclick="exportData()"><span class="glyphicon glyphicon-download"></span>.CSV</button>
<button id="btnExport" class="excelsubmit" onclick="fnExcelReport();"><span class="glyphicon glyphicon-download"></span>.XLS </button>
</div>
</div>
.container {
display: flex;
justify-content: space-between;
}
.btns-left,
.btns-right {
display: flex;
}
Also, you can use properties for align elements by horizontal axis, as an example align-items: flex-start.
Or:
float: left; for btns-left and float: right; for btns-right and display: inline-block; for every element without display: flex; anywhere.
Also, can try, float for every element without any wrappers (left properties for left side, right ones for right side)
Grid layout, but it's more complicated. The best solution is applying flexbox layout for positioning elements. Better avoid floats, cause it might voke some troubles with clearing flow in future.

Answer 2

Try to give all elements a display: inline-block for starters (so, the button input, label and three buttons), float: left is not recommended and bad practice.

Answer 3

You want it all to be next to each other? Maybe start using css grid, it's useful for making things in line.
Then there's always the option of setting all these things in a navigation bar, so it's always at the top of your screen in line.
Perhaps try and create a container that holds all the buttons in place?