Float right without creating new line - html

Question

HTML:
<div>Due date:<input type="text" name="dueDate" size="30" value="{{ticket.fields.interval.lastExecution|e}}" required disabled="disabled"></input></div>
<div>Created by:<input type="text" name="createdBy" size="30" value="{{ticket.fields.personCreated|e}}" required disabled="disabled"></input></div>
CSS:
.open-tickets-view input {
border: 0px solid #474a52;
border-radius: 0px;
max-width: 200px;
RESULT:
If I try to float right with inline-block display:
CSS:
.open-tickets-view input {
border: 0px solid #474a52;
border-radius: 0px;
max-width: 200px;
display: inline-block;
float: right;
RESULT:
I have tried several different combinations among display: flex and use justify-content: space-between but the text always breaks a new line.

Answer 1

With input elements it's a good thing to use <label>. Cause it's a label for the input. Default browser behavior with labels is that if you click on the label the mouse will focus the input. Read more about it here
Using float:
div.myDiv {
width: 300px;
border: solid 2px red;
}
div.myDiv:after {
/* clear floats is a good thing */
content: '';
display: block;
clear: both;
}
div.myDiv input {
float: right;
border:solid 2px green;
}
div.myDiv label {
border:solid 2px green;
}
<div class="myDiv">
<label for="uname">Choose a username: </label>
<input type="text" id="uname" name="name">
</div>
using positioning:
div.myDiv {
position: relative;
width: 300px;
border: solid 2px red;
}
div.myDiv input {
border:solid 2px green;
position: absolute;
right: 0;
}
div.myDiv label {
border:solid 2px green;
}
<div class="myDiv">
<label for="uname">Choose a username: </label>
<input type="text" id="uname" name="name">
</div>

Answer 2

You can use margin-left:auto on a child element of display:flex with flex-direction:row like below.
.container, .container > div {
display: flex;
flex-direction: row;
white-space:nowrap;
}
.container .right {
margin-left: auto;
}
<div class='container'>
<div>
<span>Due date:</span>
<input type="text" name="dueDate" size="30" value="{{ticket.fields.interval.lastExecution|e}}" required disabled="disabled" />
</div>
<div class='right'>
<span>Created by:</span><input type="text" name="createdBy" size="30" value="{{ticket.fields.personCreated|e}}" required disabled="disabled" />
</div>
</div>
Or maybe:
.container,
.container>div {
display: flex;
}
.container {
flex-direction: column;
}
.container>div {
flex-direction: row;
padding:1em;
}
.container .right {
margin-left: auto;
}
<div class='container'>
<div>
<span>Due date:</span>
<input class='right' type="text" name="dueDate" size="30" value="{{ticket.fields.interval.lastExecution|e}}" required disabled="disabled" />
</div>
<div>
<span>Created by:</span><input class='right' type="text" name="createdBy" size="30" value="{{ticket.fields.personCreated|e}}" required disabled="disabled" />
</div>
</div>