I'm working on creating a layout with two columns in an unordered list. I've made some progress, but I want the ul and li span elements to take up the full width of their parent container (div) without specifying a specific width. How can I achieve this? Thank you.
CSS
div {
width:300px;
}
ul {
width:200px;
}
li span {
width: 170px;
display:inline-block;
padding-left: 10px;
vertical-align: top;
}
HTML
<div>
<ul>
<li>
<input type="checkbox" value="1" name="someName[]"><span>Some short text</span>
</li>
<li>
<input type="checkbox" value="2" name="someName[]"><span>Some very very very very very very long text</span>
</li>
<li>
<input type="checkbox" value="3" name="someName[]"><span>Some short text</span>
</li>
</ul>
</div>