JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <table>
        <tr>
            <td><a href="#">&emsp;&emsp;&emsp;Get a kit&emsp;&emsp;&emsp;</a></td>
            <td><a href="#">Print a label</a></td>
        </tr>
    </table>
</div>

CSS

html {
    box-sizing: border-box;
}
*,
*:before,
*:after {
    box-sizing: inherit;
}
body {
    background: #f4f4f4;
}
div {
    margin: 5% auto;
    width: 640px;
    background: #fff;
    padding: 80px;
}
table {
    width: 100%;
}
td {
    padding: 0 20px;
    text-align: right;
    width: 50%;
    /* Help visualize */
    background: #f4f4f4;
}
td + td {
    text-align: left;
}
a {
    background: #c83442;
    color: #fff;
    text-decoration: none;
    font-family: sans-serif;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 4px;
    /* I'm not sure this CSS will work in email like Outlook, in which case we'll need to use the border trick we've been doing. I'm sure we tried this in email before. */
    /*display: block;*/
    line-height: 44px;
    text-align: center;
    border-top: 10px solid #c83442;
    border-right: 10px solid #c83442;
    border-bottom: 10px solid #c83442;
    border-left: 10px solid #c83442;
}
@media screen and (max-width: 640px) {
    div {
        width: auto;
        padding: 80px 10px;
    }
    td {
        display: block;
        clear: both;
        width: 100%;
        padding: 10px 0;
        text-align: center !important;
    }
    td a {
        display: block;
        height: 36px;
        line-height: 36px;
        border: 0;
        width: 60%;
        margin: auto;
}