JSFiddle - React, Tailwind, and code Playground

HTML

<head>
    <meta charset="utf-8" />
    <link type="text/css" href="style.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
 <div class="wrapper">
            <div class="grid-1">
                <h2>About Us</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
                    et dolore magna aliqua. Feugiat sed lectus vestibulum mattis ullamcorper velit sed ullamcorper
                    morbi. Orci ac auctor augue mauris augue neque gravida in. Nulla aliquet porttitor lacus luctus. Vel
                    eros donec ac odio tempor orci. Nunc sed augue lacus viverra vitae. Pulvinar elementum integer enim
                    neque volutpat ac tincidunt vitae semper. Viverra nibh cras pulvinar mattis. Vulputate odio ut enim
                    blandit volutpat maecenas volutpat. Tempor orci dapibus ultrices in iaculis. Sem fringilla ut morbi
                    tincidunt augue interdum. Vivamus at augue eget arcu dictum varius. Et netus et malesuada fames ac
                    turpis egestas maecenas pharetra.
                    Elementum nibh tellus molestie nunc non blandit massa enim nec. Porttitor eget dolor morbi non arcu
                    risus. Porttitor rhoncus dolor purus non enim praesent elementum facilisis leo. Imperdiet sed
                    euismod nisi porta lorem mollis aliquam.
                </p>
                <p>
                    Id volutpat lacus laoreet non curabitur. Vitae nunc sed
                    velit dignissim sodales ut eu sem. Imperdiet sed euismod nisi porta lorem mollis. Tellus elementum
                    sagittis vitae et leo duis. Lobortis elementum nibh tellus molestie nunc non blandit massa enim.
                    Morbi tincidunt ornare massa eget egestas. Magna fringilla urna porttitor rhoncus dolor purus non
                    enim. Sed...

CSS

h2 {
        color: rgba(0, 255, 255, 0.527);
    }
    .grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .grid-2 {
        padding-left: 30px;
        border-left: 1px solid aquamarine;
    }

    .wrapper {
        display: grid;
        grid-template-columns: 50% 50%;
        padding: 20px;
        margin-left: 10%;
        margin-right: 10%;
        margin-top: 10%;
    }

    .grid-1 {
        padding-right: 30px;
    }

    img {
        width: 300px;
        height: 168px;
        object-fit: scale-down;
    }

    a {
        text-decoration: none;
        color: white;
        padding-right: 10%;
        padding-top: 10%;
    }

    #social-footer {
        background-color: grey;
        bottom: 0;
        width: 100%;
        height: 100%;
        border-top: 2px solid aquamarine;
        display: grid;
        justify-content: center;
        align-items: flex-start;
    }

    #social-footer-headers {
        text-decoration: none;
        color: white;
        text-align: center;
        padding: 20px;
    }

    body {
        margin: 0;
    }

    .fa {
        padding: 15px;
        font-size: 18px;
        width: 10px;
        height: 10px;
        text-align: center;
        text-decoration: none;
        margin-right: 15%;
        align-items: center !important;

    }

    .fa-facebook {
        background: white;
        color: grey;
    }

    .fa-twitter {
        background: white;
        color: grey;
    }
    .fa-linkedin{
        background: white;
        color:grey; 
    }