input in floating div with full width in table header

Question

I have a problem with input width when padding from sides is applied.

I need for input width 100% and padding from sides. But I need to get this div with input next to the div with text "Name". This is what I have right now. All this is for filtering header of table. Can anyone suggest me a solution?

 .right{ overflow:hidden; background:red; margin-right: 10px; box-sizing: border-box; float: right; } .left{ background:green; box-sizing: border-box; padding-top: 10px; overflow:hidden; float: left; } .form-control{ display: block; width: auto; height: 34px; padding: 6px 12px; font-size: 14px; } .wrap{ width: 235px; } 

 <table> <th class="wrap"> <div class="left">Name</div> <div class="right"><input type="text" class="form-control" value=""></div> </th> </table> 

JSFiddle here

Answer 1

Give your .left and .right class some width.

.left{
    width:20%;
 }

.right{
    width:70%;
   }