JSFiddle - React, Tailwind, and code Playground

HTML

<div class="topRow">
                <div id="edit">
                    <div id="pre">Before -</div>
                    <div id="name">Some long text that should get truncated when it passes the max width</div>                    
                    <div id="post">- After</div>
                </div>
            </div>

CSS

.topRow div {
display: inline-block;
    vertical-align:middle;
}

#name {
max-width: 70%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}