JSFiddle - React, Tailwind, and code Playground

HTML

<div class="panel">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo quibusdam.</p>
    
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ad.</p>
    
    <p>We now have the problem of 15px + 20px but we can fix this relatively easy.</p>
</div>

<div class="panel two">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo quibusdam.</p>
    
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ad.</p>
    
    <p>We now have the problem of 15px + 20px but we can fix this relatively easy.</p>
</div>

<div class="panel two">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo quibusdam.</p>
    
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ad.</p>
    
    <p>We now have the problem of 15px + 20px but we can fix this relatively easy.</p>
    
    <div class="button">Button</div>
</div>

<div class="panel two">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo quibusdam.</p>
    
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ad.</p>
    
    <p>We now have the problem of 15px + 20px but we can fix this relatively easy.</p>
    
    <div class="row">
        <div class="column column-1">
            <div class="button">Button</div>
        </div>
        
        <div class="column column-2">
            <dl>
                <dt>dt</dt>
                <dd>dd</dd>
            </dl>
        </div>
    </div>
</div>

<div class="panel two">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo quibusdam.</p>
    
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ad.</p>
    
    <p>We now have the problem of 15px + 20px but we can fix this relatively easy.</p>
    
    <div class="row">
        <div class="column column-1">
            <div class="button">Button</div>
        </div>
        
        <div class="column column-2">
            <div class="button">Button</div>
            <div...

SCSS

p {
    margin-top: 0;
    margin-bottom: 20px;
}

dl {
    margin-top: 0;
    
    dt,
    dd {
        float: left;
        margin-top: 0;
        margin-bottom: 20px;
    }
}

.button {
    margin-bottom: 20px;
    
    background: red;
    color: black;
}

.row {
    &:before,
    &:after {
        content: " ";
        display: table;
    }
        
    &:after {
        clear: both;
    }
}

.column {
    float: left;
    width: 50%;
}

.column-2 {
    .button {
        float: left;
    }
}

.panel {
    margin-bottom: 15px;
    padding: 15px;
    
    background: #fff;
    border: 1px solid red;
}

.panel.two *:last-child *:last-child {
    margin-bottom: 0;
}