I am trying to create two columns in an unordered list. I have been somewhat successful, however, I don't want to specify a width for `ul` and `li span` but instead have it take up all the width of its parent (i.e. `div`). How should I do this? Thanks

**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>

```