JSFiddle - React, Tailwind, and code Playground

HTML

<section class="container">
    <section class="field">
        <ul>
            <li> Question 1  </li>
            <li> question 2 </li>
            <li> question 3 </li>
            <li> question 4 </li>
            <li> question 5 </li>
            <li> question 6 </li>
            <li> question 7 </li>
        </ul>
      
    </section>
    <section class="datawrap">
        <section class="datawrapinner">
            <ul>
                <li><b>Answer 1 :</b> 
Pellentesque neque quam, mattis a tempus et, sollicitudin at metus. Suspendisse ornare orci vitae augue adipiscing suscipit. Sed fringilla ornare condimentum. Sed condimentum nulla sapien, nec varius leo adipiscing nec. Proin in convallis diam. Donec condimentum mi turpis, non lacinia tortor ornare sed. Nam id urna vitae magna
                
                </li>
                <li><b>Answer 2 :</b></li>
                <li><b>Answer 3 :</b></li>
                <li><b>Answer 4 :</b></li>
                <li><b>Answer 5 :</b></li>
                <li><b>Answer 6 :</b></li>
                <li><b>Answer 7 :</b></li>
            </ul>
        </section>
    </section>
    
</section>

CSS

.container{
    background:#ddd;
    overflow-y:auto;
    overflow-x:hidden;
    padding:20px;
    vertical-align:top;
    overflow:hidden;
}

.field{
    width:14%;
    height:1000px;
    background:#888;
    border: 3px solid #545151;
    display:inline-block;
}

.datawrap{
    display:inline-block;
    width:75%;
    height:350px;
    background:#f3f3f3;
    border:3px solid #343434;
    vertical-align:top;
    overflow-x:auto;
    overflow-y:hidden;
}

.datawrapinner{
    width:1000px;
    height:100%;
}

ul{
    margin:0px;
    padding:0px;
    list-style-type:none;
}

ul li{
    height:70px;
    padding:4px;
    border-bottom:2px solid #343434;
}