JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
        <span>inline</span>
        <span><i>d</i>inline</span>
        <span>inline</span>
    </div>

CSS

.wrap { word-spacing: -.25em;display: table}
.wrap span {
    display:inline-block;/*all browsers & webkit will comply now*/
    word-spacing:0;/*reset for FF,Opera,IE8 (Webkit still ignores it)*/
    letter-spacing: 0;
    font:bold 1em/1.5 arial;
    background:palegreen;
    position : relative;
 
}
i{position : absolute; left : 100%; top : 20px;}