<section class="service">

    <main class="service__description">
        <p>Lorem ipsum dolor amet sum Lorem ipsum dolor amet sum Lorem ipsum dolor amet sum Lorem ipsum dolor amet sum Lorem ipsum dolor amet sum Lorem ipsum dolor amet sum Lorem ipsum dolor amet sum Lorem ipsum dolor amet sum</p>
    </main>
    <aside class="service__icon">
        <svg aria-labelledby="simpleicons-csswizardry-icon" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title id="simpleicons-csswizardry-icon">CSS Wizardry icon</title><path d="M.03 16.428V1.118C.03.5.53 0 1.147 0H22.8c.624 0 1.12.5 1.12 1.12v14.76c-.67-.41-1.46-.616-2.357-.616-1.254 0-2.205.3-2.854.896-.65.598-.97 1.328-.97 2.225 0 .97.33 1.69 1 2.15.39.285 1.11.54 2.14.762l1.05.24c.63.133 1.07.3 1.36.46.28.183.43.437.43.765 0 .566-.29.955-.87 1.148l-.03.016h-2.21c-.287-.104-.51-.254-.69-.45-.18-.224-.3-.55-.36-1.013h-1.98c0 .566.103 1.045.33 1.48h-1.68c.19-.39.3-.823.3-1.317 0-.88-.3-1.55-.886-2.016-.374-.297-.94-.535-1.688-.717l-1.72-.402c-.66-.14-1.09-.28-1.3-.4-.31-.18-.46-.45-.46-.79 0-.38.16-.68.47-.89.33-.21.75-.31 1.29-.31.49 0 .88.09 1.21.26.494.256.75.69.79 1.287h2c-.03-1.046-.415-1.853-1.15-2.404-.744-.55-1.625-.835-2.67-.835-1.255 0-2.195.3-2.853.88-.64.583-.97 1.33-.97 2.21 0 .97.33 1.688 1 2.15.402.27 1.12.523 2.15.76l1.045.24c.61.135 1.06.285 1.36.465.28.18.43.43.43.76 0 .57-.3.94-.88 1.15h-2.24c-.284-.106-.52-.256-.69-.465-.18-.22-.31-.564-.37-1.014H8.38c0 .558.105 1.05.32 1.48H6.61c.33-.52.553-1.12.663-1.79H5.22c-.14.51-.312.898-.525 1.15-.26.33-.6.54-1.02.645H2.448c-.45-.105-.837-.358-1.15-.76-.464-.558-.688-1.394-.688-2.5 0-1.12.23-1.97.66-2.58.45-.613 1.03-.91 1.79-.91.75 0 1.3.21 1.69.644.21.24.39.6.52 1.076h2.08c-.03-.618-.26-1.24-.686-1.86-.772-1.1-1.994-1.65-3.664-1.65-1.16 0-2.134.36-2.91 1.06l-.05-.11zm23.894 3.636V18.51h-.516c-.035-.597-.3-1.022-.783-1.274-.313-.164-.717-.248-1.193-.248-.54 0-.955.11-1.27.322-.312.215-.478.518-.478.902 0 .355.166.62.477.795.22.105.65.254 1.31.404l1.72.41c.3.06.56.15.8.23l-.05.03z"/></svg>
    </aside>

    <div class="service__cta"> <a href="#" class="service__button">CSS is Awesome</a>
    </div>
</section>
.service {
    display: grid;
    grid-template-columns: minmax(225px, 1fr) minmax(25%, 200px);
    grid-template-areas: "description icon"
                         "   cta        .";
    width: 95vw;
    margin: 15px auto;
    &__description {
        grid-area: description;
        border-right: 2px solid tomato;
        border-bottom: 2px solid tomato;
        padding: 30px;
        display: flex;
        align-items: center;
    }
    &__icon {
        grid-area: icon;
        background-color: tomato;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px;
        svg {
            width: 65%;
            fill: white;
            @media (max-width: 450px) {
                width: 100%;
            }
        }
    }
    &__cta {
        grid-area: cta;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding: 15px;
        border-right: 2px solid tomato;
        @media (max-width: 600px) {
            grid-column: span 2;
            justify-content: center;
            border-right: 0;
            padding: 15px 0;
            .service__button {
                width: 100%;
               
            }
        }
    }
    &__button {
        display: block;
        text-decoration: none;
        text-align: center;
        background-color: tomato;
        color: white;
        padding: 20px 65px;
        transition: .3s ease-out;
        &:hover {
            background-color: darken(tomato, 20%);
        }
    }
}


html, body {
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: calc(16px + (20 - 16) * (100vw - 320px)/ (1500 - 320));
    line-height: 1.4em;
    @media (max-width: 600px) {
        font-size: 14px;
    }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.