JSFiddle - React, Tailwind, and code Playground

HTML

<h1>display: inline</h1>

<div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tincidunt facilisis urna id pretium. Aenean aliquet elit eget mollis accumsan. Nullam <span class = "test1">tempor</span> nulla in arcu varius fermentum. Cras vel nibh nisi. Sed placerat elit dui, et molestie urna sollicitudin commodo. Vestibulum ullamcorper rhoncus suscipit. Pellentesque sed nisl
</div>

<h1>display: block</h1>

<div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tincidunt facilisis urna id pretium. Aenean aliquet elit eget mollis accumsan. Nullam <span class = "test2">tempor</span> nulla in arcu varius fermentum. Cras vel nibh nisi. Sed placerat elit dui, et molestie urna sollicitudin commodo. Vestibulum ullamcorper rhoncus suscipit. Pellentesque sed nisl
</div>

<h1>display: inline-block</h1>

<div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tincidunt facilisis urna id pretium. Aenean aliquet elit eget mollis accumsan. Nullam <span class = "test3">tempor</span> nulla in arcu varius fermentum. Cras vel nibh nisi. Sed placerat elit dui, et molestie urna sollicitudin commodo. Vestibulum ullamcorper rhoncus suscipit. Pellentesque sed nisl
</div>

CSS

h1 {
    font-size: 16px;
}

div { 
    border: 1px solid black;
    padding: 8px; margin: 12px; 
    background-color: #ccc; 
    width: 70% 
}

.test1 { 
    display: inline; 
    height: 25px;
    border: 1px solid red;
    background-color: white; 
}

.test2 { 
    display: block; 
    height: 25px;
    border: 1px solid red;
    background-color: white; 
}

.test3 {
    display: inline-block; 
    height: 25px;
    border: 1px solid red;
    background-color: white;
}