1

I have a ul with n li's, the first one should behave like a title, and the rest like options, the thing is that the first one is at the left and the rest at the right and on top of each other.

<ul>
    <li>TITLE</li>
    <li>option</li>
    <li>option</li>
    <li>option</li>
    <li>option</li>
</ul>

I can't alter the html structure (wraping in divs, etc.)

I want to achieve something like this:

Title                  option
                       option 
                       option 
                       option

Is there a way to do this? with flexbox or plain css? thanks in advance

Edit: I can't use definition lists because the functionality is made using ul and li, if I change the HTML structure the functionality won't work, and if I change the functionality other similar structures will stop working.

kukkuz
  • 41,512
  • 6
  • 59
  • 95
epresas
  • 122
  • 7
  • See [this answer](https://stackoverflow.com/questions/40762697/how-to-align-dt-and-dd-side-by-side-using-flexbox-with-multiple-dd-underneath-th/40762801#40762801) – kukkuz Sep 14 '18 at 12:37
  • ul { display: inline-flex; flex-wrap: wrap; } li {flex-basis: 50%} li:nth-child(n+3) {flex-basis: 50.01%; margin-left: auto} – VXp Sep 14 '18 at 12:52
  • you don't need to change the structure, keep it the same and apply the same code as the duplicate – Temani Afif Sep 14 '18 at 13:01
  • @epresas first you can target all `li` by using selector `ul li` and just below that target the `li:first-child` of `ul`... try it out... – kukkuz Sep 14 '18 at 13:30
  • @epresas use these styles - `ul li { margin-left: auto; width: 66%; } ul li:first-child { width: 33%; }` in that order... – kukkuz Sep 14 '18 at 13:33

0 Answers0