Align a <ul> inside a <li> in one column next to the li

Question

I have a <ul> inside a <li> and i want to align the text like this (see screen shot).

How can i do that ?

<ul>
  <li>TEXT 1</li>
  <li>
    <span>TEXT 2</span>
    <ul>
      <li>TEXT A</li>
      <li>TEXT B</li>
      <li>TEXT C</li>
    </ul>
  </li>
  <li>TEXT 3</li>
</ul>

Answer 1

You could simply use display: flex

.flexcontainer {display: flex}

<ul>
  <li>TEXT 1</li>
  <li class="flexcontainer">
    <span>TEXT 2</span>
    <ul>
      <li>TEXT A</li>
      <li>TEXT B</li>
      <li>TEXT C</li>
    </ul>
  </li>
  <li>TEXT 3</li>
</ul>