JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div class="table">
        <div class="copy">Lorem ipsum</div>
        <div class="button">Save</div>
    </div>
</div>

<div class="container">
    <div class="table">
        <div class="copy">Lorem ipsum</div>
        <div class="button">Update and save</div>
    </div>
</div>

<div class="container">
    <div class="table">
        <div class="copy">Lorem ipsum</div>
        <div class="button">Cancel</div>
    </div>
</div>

<p>How to truncate the copy cell?</p>

<div class="container">
    <div class="table">
        <div class="copy">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus eius fugit non dolorum ipsam fuga laborum consectetur minus atque nisi nobis voluptatum aut doloremque tenetur maiores officiis quibusdam vitae voluptate.</div>
        <div class="button">Cancel</div>
    </div>
</div>

CSS

.container {
    width: 520px;
    background: yellow;
    padding: 6px;
    margin-bottom: 10px;
}

.table {
    display: table;
    width: 100%;
}

.table > * {
    display: table-cell;
}

.copy {
    width: 100%;
    
    /*  does not work, since no table-layout: fixed is set
    
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    
    */
}

.button {
    white-space: nowrap;
}