html input element expand to full width

Question

I have a simple problem but solutions I have tried does not work. I have a two column layout in my form. Furthermore, the right column is divided into two columns. Left being fixed width (label) and right being input. I'd like input and label on same line and input field fill the rest of the available space if possible. Please see fiddle and let me know what I am missing.

<div style="float: left; width: 45%">
  <div id="keepTogether">
    <div id="label">
      Description
    </div>
    <div id="rightColumn">
      <input id="inputfield" />    
    </div>

  </div>
</div>

#keepTogether {
  height: 24px;
  margin-bottom: 8px;
  margin-top: 0px;
}

#Label {
  width: 100px;
  float: left;
  display: inline-block;
}

#inputfield {
  float: right;
  width: 100%;
}

#rightColumn {
  width: auto;
}

https://jsfiddle.net/workmonitored/4m0sj1fq/4/#&togetherjs=j3i2Q105hF

Answer 1

Option 1 using display flex

snippet

#main{
 float: left;
 width:60% ;
   display:flex;
   border:solid;
}
#keepTogether {
  border:solid;
}

#label {
  display: inline;
  flex: 0 0 100px;
}

#inputfield {
      -webkit-box-flex:1;
      -webkit-flex:1;
          -ms-flex:1;
              flex:1;
  
}

<div id='main'>
    <div id="label">
      Description
    </div>
      <input id="inputfield" />    
</div>

---

Option 2 using table tag

here is a snippet

table{
  width:60%;
}
td {
  padding:0px;
  margin:0px;
}
#inputfield{
  width:100%;
  margin:none;
  padding:0;

}
#label{
  width:50px;
}

<table>
<tr id='main'>
      <td id="label">
      Description:</td>
    <td id="rightColumn">
       <input id="inputfield" />   
    </td>
  </tr>
  </table>

Answer 2

I found some mistake on your code.
- Your first div is not necessary to keep.
- Your id selection is not correct. It should be #label And you should follow this code structure and css to fix the issue as well.

#keepTogether {
  display: inline-block;
}

#label {
  float: left;
  padding-right: 10px;
}

#inputfield {
  width: 200px;
}

  <div id="keepTogether">
    <div id="label">
      Description
    </div>
    <input id="inputfield" />
  </div>

Answer 3

Hope this would work for you.

#keepTogether {
        height: 24px;
        margin-bottom: 8px;
        margin-top: 0px;
    }

    #Label {
        width: 20%;
        float: left;
        display: inline-block;
    }

    #inputfield {
        float: right;
        width: 100%;
    }

    #rightColumn {
        width: 80% !important;
        width: auto;
        float: left;
    }