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>