<ul id="first"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> <ul id="second"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul>
ul { display: flex; width: 400px; } li { width: 50px; height: 50px; list-style:none; border: 1px solid #ddd; background: #eee; } li + li { margin-left: 10px; } ul#second { flex-direction: column; } ul#second li+li { margin-top: 10px; margin-left: 0; }