How to apply CSS on texte label beside an input? - html

Question

I have this small code contains a text (label) and a text input
What I am looking for is to have text + input take 100% of the div (i.e 20% for text and 80% for input) and the text should be in the middle of its zone with a background has the same height as the input.
I tried with span, with applying background-color: blue; on the div but It didn't have any impact.
Do you know ho to do it?
Thank you in advance.
#zoneFiltre {
width: 100%;
}
.champs {
width:20%;
background-color: blue;
text-align: middle;
color: white;
}
#filtreMultiAptitudes{
width:80%;
float:right;
}
<div id="listeMultiAptitude">
<div class="zoneFiltre">
<label class="champs">filter: </label>
<input type="text" id="filtreMultiAptitudes" />
</div>
</div>

Answer 1

If you want to use Flexbox you can use flex: 0 0 80% on input and flex: 1 on label also its text-align: center
.zoneFiltre {
display: flex;
}
.champs {
flex: 1;
background-color: blue;
text-align: center;
color: white;
}
#filtreMultiAptitudes {
flex: 0 0 80%;
}
<div id="listeMultiAptitude">
<div class="zoneFiltre">
<label class="champs">filter: </label>
<input type="text" id="filtreMultiAptitudes" />
</div>
</div>

Answer 2

This is because <label> tag is an inline element so it cannot take width/height. Display it as inline-block.
body{
margin: 0;
}
#zoneFiltre {
width: 100%;
}
.champs {
display: inline-block;
width:20%;
background-color: blue;
color: white;
}
#filtreMultiAptitudes{
display: inline-block;
width:79.3%;
float:right;
}
<div id="listeMultiAptitude">
<div class="zoneFiltre">
<label class="champs">filter: </label>
<input type="text" id="filtreMultiAptitudes" />
</div>
</div>
The space between both elements is because the <input> tag has a default border. You can use a lower percentage (as shown above) or use calc function to rest the width that occupy the border.
body{
margin: 0;
}
#zoneFiltre {
width: 100%;
}
.champs {
display: inline-block;
width:20%;
background-color: blue;
color: white;
}
#filtreMultiAptitudes{
display: inline-block;
width: calc(80% - 4px);
float:right;
}
<div id="listeMultiAptitude">
<div class="zoneFiltre">
<label class="champs">filter: </label>
<input type="text" id="filtreMultiAptitudes" />
</div>
</div>
Another solution and the best in my opinion is to use box-sizing: border-box which calculates the width taking as part of the width the borders and paddings of an element.
body{
margin: 0;
}
#zoneFiltre {
width: 100%;
}
.champs {
display: inline-block;
width:20%;
background-color: blue;
color: white;
}
#filtreMultiAptitudes{
display: inline-block;
width: 80%;
box-sizing: border-box;
float:right;
}
<div id="listeMultiAptitude">
<div class="zoneFiltre">
<label class="champs">filter: </label>
<input type="text" id="filtreMultiAptitudes" />
</div>
</div>

Answer 3

You can use display:table if you fancy this.
form {
display:table;
border:1px dotted black;
width:100%;
}
form p {
display:table-row;
}
label, form span {
display:table-cell;
padding:0.5em 0;
}
label {
background:blue;
color:white;
vertical-align:top;
}
span input, span textarea {
box-sizing:border-box;
width:100%;
}
textarea {
display:block;
}
<form>
<p>
<label for="input1">A label: </label>
<span><input type="text" id="input1" /></span>
</p>
<p>
<label for="input2">A longer label:</label>
<span><input type="text" id="input2" /></span>
</p>
<p>
<label for="txt">Textarea:</label>
<span><textarea id="txt" rows="5" cols="15"></textarea></span>
</p>
</form>