I'm writing a code that creates a tree structure of data. and it is as below.

```css
ul::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  border-left: 2px solid #000;
  width: 0;
  height: 2em;
}

#theAccount {
  width: 100%;
  max-width: 325px;
  margin: auto;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-top: 10px;
  background-color: #f4f6f9;
  text-align: center;
  background-color: #fff9e3;
}

ul {
  position: relative;
  padding: 2em 0;
  white-space: nowrap;
  margin: 0 auto;
  text-align: center;
}

ul:after {
  content: '';
  display: table;
  clear: both;
}

li {
  display: inline-block;
  vertical-align: top;
  text-align: center;
  list-style-type: none;
  position: relative;
  padding: 2em .5em 0 .5em;
}

li:before,
li:after {
  content: '';
  position: absolute;
  top: 0;
  right: 50%;
  border-top: 2px solid #000;
  width: 50%;
  height: 2em;
}

li:after {
  right: auto;
  left: 50%;
  border-left: 2px solid #000;
}

li:only-child:after,
li:only-child::before {
  display: none;
}

li:only-child {
  padding-top: 0;
}

li:first-child::before,
li:last-child::after {
  border: 0 none;
}

li:last-child::before {
  border-right: 2px solid #000;
  border-radius: 0 5px 0 0;
}

li:first-child::after {
  border-radius: 5px 0 0 0;
}
```

```html
<div>

  <div>

    <div id="theAccount">

      <h1>
        Main
      </h1>

    </div>
    <ul>
      <li>
        Sub1 Tyesxt </li>
      <li>
        Sub 2 Tyesxt

      </li>
      <li>
        Sub3 Tyesxt

      </li>
      <li>
        Sub4 Tyesxt
      </li>
      <li>
        Sub5 Tyesxt

      </li>
    </ul>
  </div>
</div>
```

Here the tree output that we get is top to bottom, I want to know how I can rotate it by 90 degrees. i.e. I want the tree to be from left to right like below with proper styling.

```
           |--Sub1 Tyesxt 
           |--Sub2 Tyesxt
Main ------|--Sub3 Tyesxt
           |--Sub4 Tyesxt
           |--Sub5 Tyesxt

```

Please let me know how Can I get this done.

Thanks