JSFiddle - React, Tailwind, and code Playground

HTML

<h2>SERVERS:</h2>
<!--I want each set of H3 and P to be on the same line-->
<h3>Server 1 Status:</h3><p id="running">Running</p>
<h3>Server 2 Status:</h3><p id="notRunning">Not Running</p>
<h3>Server 3 Status:</h3><p id="running">Running</p>

CSS

#running {
    color: green;
    font-weight: bold;
}

#notRunning {
    color: red;
    font-weight: bold;
}

h3, p {
    display: inline;
}

h3::after {
    content: " ";
}

p::after {
    content: "";
    display: block;
    margin: 1em;
}