JSFiddle - React, Tailwind, and code Playground

HTML

<div class="sub-logo-wrap">
    <div class="sub-logo">
        <img src="//dummyimage.com/60x30" width="auto" height="30px" />
    </div>
    <div class="divider"></div>
    <div class="sub-logo-text">
        <p>text ... can be more than one line ... </p>
    </div>
</div>

CSS

.sub-logo-wrap > div {
    display: inline-block;
    vertical-align: middle;
}
.sub-logo {
    vertical-align: middle;
}
.divider {
    width: 1px;
    height: 20px;
}
.sub-logo-text {
    width: 150px;
    border: 1px solid red;
}
.sub-logo-text p {
    /* margin: 0; */
}