JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="hr">
                        <li class="dot"></li>
                        <li class="random_thing">....................<bold>CLIFFEDGE</bold> STUDIOS....................</li>
                        <li class="dot"></li>
                    </ul>

CSS

#hr {
    list-style-type: none;
    float: left;
}

#hr li {
    display: inline-block;
}

.dot {
    border-radius: 15px;
    background-color: black;
    height: 15px;
    width: 15px;
    vertical-align: middle;
}