Skip to content

Instantly share code, notes, and snippets.

@ketsugi
Last active June 1, 2016 14:46
Show Gist options
  • Save ketsugi/29ecf56d314ecadfd00f6be5aa99fde0 to your computer and use it in GitHub Desktop.
Save ketsugi/29ecf56d314ecadfd00f6be5aa99fde0 to your computer and use it in GitHub Desktop.
Child element filling remaining space of parent element
.input-composite {
align-items: center;
display: inline-flex;
width: 70%;
}
.label {
display: inline-block;
width: 30%;
}
.input {
flex-grow: 1;
width: auto;
}
<div class="input-group">
<label class="label">Facebook:</label>
<span class="input-composite">
<span class="input-prefix">https://facebook.com/</span>
<input class="input" type="text">
</span>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment