Float right without creating new line

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>