html - Vertical align with flex-box and flex-direction: column -

currently html displaying this:


want display this:

the buttons need vertically aligned text using flex-box, or method not require padding, margin (margin:auto fine), or offsets.

http://codepen.io/simply-simpy/pen/vkpayn

html:

<ul class="nav">   <li><a href="/about.html">about</a>     <button>+</button>       <ul>         <li><a href="/level-2.html">level 2 nav item</a>             <button>+</button>             <ul>                 <li><a href="/level-3.html">level 3 nav item</a></li>                 <li><a href="/level-3.html">level 3 nav item</a></li>                 <li><a href="/level-3.html">level 3 nav item</a></li>             </ul>         </li>     </ul>   </li> </ul> 

css

 .nav {     width: 300px;   }   button {     display: inline-block;     width: 25px;     height: 25px;     align-self: flex-end;   }   ul {     list-style-type: none;   }   ul > ul li{     padding-left: 20px;   }   ul > ul > ul li {     padding-left: 40px;   }   li {     display: flex;     flex-direction: column;     line-height: 3;   }   {     border-top: 1px solid black;   } 

you can group button , a in 1 div , use display: flex on div align-items: center vertically center items.

.nav {    width: 300px;  }  button {    width: 25px;    height: 25px;  }  ul {    list-style-type: none;  }  ul > ul li {    padding-left: 20px;  }  ul > ul > ul li {    padding-left: 40px;  }  li {    width: 100%;    border-top: 1px solid black;  }  {    padding: 20px 0;    display: block;  }  div {    display: flex;    align-items: center;    justify-content: space-between;  }

<ul class="nav">    <li>      <div>        <a href="/about.html">about</a>        <button>+</button>      </div>      <ul>        <li>          <div>            <a href="/level-2.html">level 2 nav item</a>            <button>+</button>          </div>          <ul>            <li><a href="/level-3.html">level 3 nav item</a>            </li>            <li><a href="/level-3.html">level 3 nav item</a>            </li>            <li><a href="/level-3.html">level 3 nav item</a>            </li>          </ul>        </li>      </ul>    </li>  </ul>