Making input inside div always scale in one line - html

Question

I would like to scale my input fields better.
When browser is maximized they look like this:
On smaller screens they look like this, the input fields goes to the bottom while it should be on the right:
My code:
.table-body {
width: 100%;
max-width: 952px;
border-spacing: 0px;
border-left: 1px solid #e4e4e4;
border-right: 1px solid #e4e4e4;
}
.table-body div {
padding-top: 3px;
padding-bottom: 3px;
}
.table-field1 {
text-align: center;
float: left;
padding-left: 11px;
padding-right: 11px;
}
.table-field2 {
font-size: 15px;
font-family: 'Roboto', sans-serif;
font-weight: 400;
color: #8f268d;
float: left;
margin-top: -2px;
}
.table-field3 {
color: #323232;
display: inline;
padding-left: 10px;
}
.table-field3 input {
border: 1px solid #e4e4e4;
width: 95%;
max-width: 844px;
color: #333333;
font-family: 'Roboto', sans-serif;
font-weight: 400;
font-size: 15px;
padding-top: 3px;
border-radius: 7px;
padding-left: 4px;
behavior: url(/panel/css/pie/pie.php);
}
<div class="table-body">
<div class="table-header">
<div class="left">
<input type="checkbox" name="usun_wszystkie" id="checkbox_all" class="css-checkbox" onchange="checkAll('checkbox[')">
<label for="checkbox_all" class="css-label"> Zaznacz wszystkie</label>
</div>
</div>
<div class="tabela_0">
<div class="table-field1">
<input type="checkbox" name="usun[438]" id="checkbox[438]" class="css-checkbox">
<label for="checkbox[438]" class="css-label"></label>
<input type="hidden" name="tag[438]" value="test.com">
</div>
<div class="table-field2">
<div>USUŃ</div>
</div>
<div class="table-field3">
<input type="text" name="entry" value="test.com">
</div>
</div>
</div>
<div class="table-end"></div>

Answer 1

If you can use flexbox to support your project, then try this:
.table-body {
width: 100%;
max-width: 952px;
border-spacing: 0px;
border-left: 1px solid #e4e4e4;
border-right: 1px solid #e4e4e4;
}
.tabela_0 {
display:flex;
}
.table-body div {
padding-top: 3px;
padding-bottom: 3px;
}
.table-field1 {
text-align: center;
padding-left: 11px;
padding-right: 11px;
}
.table-field2 {
font-size: 15px;
font-family: 'Roboto', sans-serif;
font-weight: 400;
color: #8f268d;
margin-top: -2px;
}
.table-field3 {
color: #323232;
padding-left: 10px;
flex-grow:1;
}
.table-field3 input {
border: 1px solid #e4e4e4;
width: 95%;
max-width: 844px;
color: #333333;
font-family: 'Roboto', sans-serif;
font-weight: 400;
font-size: 15px;
padding-top: 3px;
border-radius: 7px;
padding-left: 4px;
behavior: url(/panel/css/pie/pie.php);
}
<div class="table-body">
<div class="table-header">
<div class="left">
<input type="checkbox" name="usun_wszystkie" id="checkbox_all" class="css-checkbox" onchange="checkAll('checkbox[')">
<label for="checkbox_all" class="css-label"> Zaznacz wszystkie</label>
</div>
</div>
<div class="tabela_0">
<div class="table-field1">
<input type="checkbox" name="usun[438]" id="checkbox[438]" class="css-checkbox">
<label for="checkbox[438]" class="css-label"></label>
<input type="hidden" name="tag[438]" value="test.com">
</div>
<div class="table-field2">
<div>USUŃ</div>
</div>
<div class="table-field3">
<input type="text" name="entry" value="test.com">
</div>
</div>
</div>
<div class="table-end"></div>

Answer 2

Get the Fiddle: https://jsfiddle.net/z1o0fp1n/
I used tables:
<table><tr><td>
<div class="table-field2">
<div>USUŃ</div>
</div>
</td><td>
<div class="table-field3">
<input type="text" name="entry" value="test.com">
</div>
</td></tr>
</table>
Also you may use float:
<div class="table-field3" style='float:left;display:block'>
<input type="text" name="entry" value="test.com">
</div>

Answer 3

flexbox?
.table-body {
width: 100%;
max-width: 952px;
border-spacing: 0;
border-left: 1px solid #e4e4e4;
border-right: 1px solid #e4e4e4;
}
.table-body div {
padding: 3px;
}
.table-field2 {
font-size: 15px;
font-family: Roboto,sans-serif;
font-weight: 400;
color: #8f268d;
}
.table-field3 input {
border: 1px solid #e4e4e4;
color: #333;
font-family: Roboto,sans-serif;
font-weight: 400;
font-size: 15px;
padding-top: 3px;
border-radius: 7px;
padding-left: 4px;
behavior: url(/panel/css/pie/pie.php);
width: 95%;
}
.tabela_0 {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
padding: 3px;
}
.table-field3 {
width: 100%;
}
<div class="table-body">
<div class="table-header">
<div class="left"> <input type="checkbox" name="usun_wszystkie" id="checkbox_all" class="css-checkbox" onchange="checkAll('checkbox[')"><label for="checkbox_all" class="css-label"> Zaznacz wszystkie</label></div>
</div>
<div class="tabela_0"><div class="table-field1"><input type="checkbox" name="usun[438]" id="checkbox[438]" class="css-checkbox"><label for="checkbox[438]" class="css-label"></label><input type="hidden" name="tag[438]" value="test.com"></div><div class="table-field2"><div>USUŃ</div></div><div class="table-field3"><input type="text" name="entry" value="test.com"></div></div>
</div>