Nested list columns by tophtucker

index.html

<!DOCTYPE html>
<meta charset="utf-8">

<style>
ul {
  list-style-type: none; /* no bullets */
  padding-left: 0; /* no spacing on left */
}
li {
  clear: both; /* start a new line, kinda */
  border-top: 1px solid #ccc; /* just for show */
}
li header {
  float: left;
  width: 50%;
}
li ul {
  float: right;
  width: 50%;
}
</style>

<ul>
  <li>
    <header>Milky Way</header>
    <ul>
      <li>
        <header>Sun</header>
        <ul>
          <li>Mercury</li>
          <li>Venus</li>
          <li>Earth</li>
          <li>Mars</li>
          <li>Jupiter</li>
          <li>Saturn</li>
          <li>Uranus</li>
          <li>Nepture</li>
        </ul>
      </li>

      <li>Alpha Centauri</li>
    </ul>
  </li>
  <li>
    <header>Andromeda</header>
    <ul>
      <li>N1/S1 arm</li>
      <li>N2/S2 arm</li>
      <li>N3/S3 arm</li>
      <li>N4/S4 arm</li>
      <li>N5/S5 arm</li>
      <li>N6/S6 arm</li>
      <li>N7/S7 arm</li>
    </ul>
  </li>
</ul>