entrée en div flottant avec pleine largeur dans l'en-tête de table

Question

J'ai un problème avec la largeur d'entrée lorsque le rembourrage des côtés est appliqué.

J'ai besoin d'une largeur d'entrée de 100% et de rembourrage des côtés. Mais j'ai besoin d'obtenir cette div avec entrée à côté de la div avec le texte "Name". C'est ce que j'ai en ce moment. Tout ceci est pour filtrer l'en-tête de la table. Quelqu'un peut-il me suggérer une 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

Donnez votre .left et la classe .RIGHT une certaine largeur.

.left{ 
    width:20%; 
} 

.right{ 
    width:70%; 
    }