JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap" role="presentation">
    <p>Example 1:</p>
    <p>Not aligned properly</p>
    <button class="edit">Modify</button>
</div>

<div class="wrap" role="presentation">
    <p>Example 2:</p>
    <p>Alignment good, but risk-prone.</p>
    <button class="edit badedit">Modify</button>
</div>

<div class="wrap" role="presentation">
    <p>Example 3:</p>
    <p>Alignment good, but risk-prone.</p>
    <p>Alignment good, but risk-prone.</p>
    <p>Alignment good, but risk-prone.</p>
    <button class="edit badedit">Modify</button>
</div>

<div class="wrap" role="presentation">
    <p>Example 4:</p>
    <p>Alignment good, but risk-prone.</p>
    <p>Alignment good, but risk-prone.</p>
    <p>Alignment good, but risk-prone.</p>
    <p>Alignment good, but risk-prone.</p>
    <p>Alignment good, but risk-prone.</p>
    <p>Alignment good, but risk-prone.</p>
    <p>Alignment good, but risk-prone.</p>
    <p>Alignment good, but risk-prone.</p>
    <button class="edit badedit">Modify</button>
</div>

CSS

/* start test setup */
div.wrap {
    width: 300px;  
    background-color: lightblue; 
    border-radius: 1em;
    margin-bottom: 1em;
}
div, p {margin: 0; padding: 0}
/* end test setup */


.wrap {
    position: relative;
    padding: 1em;
}
.wrap .edit {
    position: absolute;
    top: 40%;
    right: 0;
    box-sizing: padding-box;
}

.wrap .badedit {
    right: 1em;
}