How to align a span or div to the middle when it's rotated?

Question

I am trying to match with nested accordion layout based on just HTML and CSS to match with an mock up which looks exactly like below:

My implementation layout looks like this:

There are alignment issues to align center for rotated text and width issues in the design.

body{
    background: seagreen;
    font-size: 16px;
    font-family: Arial;
    color: #333;
    border-color: none;

  }
  div.container{
    margin: 0 auto;
    padding: 10px;
    background: #ccc;
    border: solid 1px;
    width: 50%;
  }
  li {
    list-style-type: none;
    padding: 5px;
    background: #ddd;
    border: solid 1px; 
  }
  li.has-children.and{
    background: #4059AA;
  }
  li.has-children.or {
    background: #BE60A6;    		
  }
  li.has-children ul {
    margin-top: -3%;
  }
  li span{
    display: inline-block;
    font-weight: bold;
    /* Safari */
    -webkit-transform: rotate(-90deg);
    vertical-align: baseline;
    /* Firefox */
    -moz-transform: rotate(-90deg);

    /* IE */
    -ms-transform: rotate(-90deg);

    /* Opera */
    -o-transform: rotate(-90deg);

    /* Internet Explorer */
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

    /*-webkit-transform: skewY(3deg);
    -moz-transform: skewY(3deg);*/
      -webkit-transform-origin: bottom right;
      -moz-transform-origin: bottom right;
  }

<div class="container">
  <ul class="tabs">
    <li class="has-children and">
      <span>AND</span>
      <ul>
        <li>Sachin</li>
        <li>Sourav</li>
        <li>Dravid</li>
        <li class="has-children or">
          <span>OR</span>
          <ul>
            <li>Bravo</li>
            <li>Gayle</li>
            <li>Sarwan</li>
            <li class="has-children and">
              <span>AND</span>
              <ul>
                <li>Hansie</li>
                <li>Rhodes</li>
                <li>Pollock</li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>	
    </li>
  </ul>
</div>

Answer 1

My attempt:

Codepen demo

Some specs:

• all the logical operators are data- attributes of the list and written as the content of a before pseudoelement of the lists
• the vertical orientation works by the writing-mode: vertical-lr; property
• the colours are defined with a CSS variable inline, but of course you could use a class instead
• the data inside is placed as flexbox columns and you can control the vertical alignment of data and headers

The final result is quite responsive

Markup

<div class="data">
  <ul data-logical-operator="AND" style="--bg:blue">
    <li> <!-- 1st level -->
      <dl>
        <dt><span>Attribute</span></dt>
        <dd><span>LLDP System Description</span></dd>
        <dt><span>Operator</span></dt>
        <dd><span>Equal</span></dd>
        <dt><span>Value</span></dt>
        <dd><span>RegDN 6388 MINET_6920</span></dd>
      </dl>

      <ul data-logical-operator="OR" style="--bg:violet"> <!-- 2nd level -->
        <li>
          <dl>
            <dt><span>Attribute</span></dt>
            <dd><span>LLDP System Description</span></dd>
            <dt><span>Operator</span></dt>
            <dd><span>Equal</span></dd>
            <dt><span>Value</span></dt>
            <dd><span>RegDN 6388 MINET_6920</span></dd>
          </dl>      
          <dl>
            <dt><span>Attribute</span></dt>
            <dd><span>LLDP System Description</span></dd>
            <dt><span>Operator</span></dt>
            <dd><span>Equal</span></dd>
            <dt><span>Value</span></dt>
            <dd><span>RegDN 6388 MINET_6920</span></dd>
          </dl>

          <ul data-logical-operator="AND" style="--bg:blue">  <!-- 3rd level -->
            <li>
              <dl>
                <dt><span>Attribute</span></dt>
                <dd><span>LLDP System Description</span></dd>
                <dt><span>Operator</span></dt>
                <dd><span>Equal</span></dd>
                <dt><span>Value</span></dt>
                <dd><span>RegDN 6388 MINET_6920</span></dd>
              </dl>
            </li>
          </ul>  <!-- /3nd level -->

        </li>  
      </ul> <!-- /2nd level -->

    </li> <!-- /1st level -->  
  </ul>
</div>

CSS

.data { position: relative; font: 14px Arial;}
.data ul { 
  margin: 0; 
  position: relative;
  padding-left: 45px;
  list-style: none; }

.data dl {
  padding: 0 20px;
  margin: 0 0 15px 0;
  border: 1px #d8d8d8 solid;
  width: 100%;
  display: flex;
  height: 6rem;
  flex-flow: column wrap;
}

.data dt, .data dd {
  margin: 0;
  height: 50%;
  width: 30%;
  line-height: 3rem;
}


.data dl span { 
  line-height: 1.3; 
  display: inline-block; }

.data dt span { vertical-align: middle; }
.data dd span { vertical-align: top; }


.data ul[data-logical-operator]::before {
  display: inline-block;
  content: attr(data-logical-operator);
  background-color: var(--bg);
  color: #fff;
  position: absolute;
  width: 45px;
  bottom: 0;
  line-height: 45px;
  top: 0;
  text-align: center;
  transform: rotateZ(180deg);
  writing-mode: vertical-lr;
}

---

Result