Make `INPUT` tag fill remaining element width
Not sure if the `LABEL` tag should wrap around everything, but eh, tired of the `for` attribute.
by thirdender
HTML
<label class="row">
<strong>Search</strong>
<span><input type="text" title="Search" /></span>
</label>
<label class="row">
<strong>Another search!</strong>
<span><input type="text" title="Search" /></span>
</label>
<label class="row">
<strong>And More!</strong>
<span><div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div></span>
</label>
SCSS
body {
margin: 20px;
}
input {
font-size: 1em;
font-family: inherit;
}
.row {
overflow: hidden;
display: block;
background: #dedcd9;
margin: 2px 0;
strong {
float: left;
padding: .2em .4em;
}
span {
display: block;
overflow: hidden;
background: red;
}
input, div {
width: 100%;
padding: .2em .4em;
border: 0;
margin: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: green;
}
}