JSFiddle - React, Tailwind, and code Playground

by aflynt

HTML

<div class="tool no-guide">
        <img alt="Adobe Reader" src=
        "http://powerdelivery.southernco.com/apc/distribution/dts/iwov-resources/images/tool-icons/adobe-reader.jpg">
        <div class="tool-text">
            <h3>Adobe Reader</h3>
            <p>View, annotate, and share PDF documents</p>
            
        </div>
        <div class="soco-store-link-wrapper">
                <ul>
                    <li>
                        <a href="#" target="_blank">GO TO SOCO STORE</a>
                    </li>
                    <li>
                        <a href="#" target="_blank">DOWNLOAD GUIDE</a>
                    </li>
                </ul>
            </div>
    </div>

CSS

.tool {
    width: 304px;
    margin-bottom: 14px;
    border: 1px solid #d52b1e;
    background-color: #ffffff;
    text-align: center;
    break-inside: avoid;
    -webkit-column-column-fill: balance;
    -moz-column-column-fill: balance;
    column-fill: balance;
}

ul {
  list-style-type: none;
    margin: 0;
    padding: 0;
    /*width:100%;*/
}



.tool-text {
    margin-bottom: 28px;
}

.soco-store-link-wrapper:after {
   visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
}

.soco-store-link-wrapper li {
  float:left;
  width:146px;
}

.soco-store-link-wrapper li a {
    text-decoration: none;
    border-radius: 0px;
    background-color: #ababab;
    display: block;
    font-family: "UniversCondensed","Arial Narrow",Helvetica,sans-serif;
    font-size: 12px;
    height: 19px;
    line-height: 20px;
    margin: 0px;
    /*padding: 7px 7px 8px 12px;
    width: 50%;*/
    text-align: center;
}

.soco-store-link-wrapper ul li:nth-child(1) a {
  padding-right:19px;
  background-color:#ababab;
}

.soco-store-link-wrapper ul li:nth-child(2) a {
  width:144px;
  padding-right:14px;
  background-color:#bd0f11;
}