JSFiddle - React, Tailwind, and code Playground

HTML

<div class="outer">
  <div class="label"><span>1.</span></div>
This is content that determines the height of the outer div.  It's variable in size, so the label div must have height 100%, hence other mechanisms to center the label text didn't seem to work.
</div>

<div class="outer">
  <div class="label"><span>Longer text</span></div>
So yay, the labels are centered vertically no matter how tall the content.
</div>

CSS

* { font-family:arial; }

.outer {
    position:relative;
    padding: 10px 10px 10px 40px;
    border: 1px solid #999;
    margin-top: 5px;
}

.label {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    background-color:#999;
    width:30px;
}

/* vertical centering */
.label>span {
    position:absolute;
    top:50%;
    line-height:0px;
}

/* horizontal centering */
.label>span {
    width:100%;
    text-align:center;
}

/* useless styling */
.label>span {
    color: #fff;
    font-weight:bold;
}