making it responsive within two sections?

[smallball]

Im working on a sort "hero" section of sorts with a right hand aside. i cant make it responsive on one without it adversely

affecting the other. at this point im not sure what to do and thought if anyone had any ideas that would be great.

so heres the code any help appreciated:

 

<div class="content clearfix">

<div class="main-content">

<h1 class="recent-post-title"> Recent Post</h1>`

<div class="post">

<img src="./images/football.jpg" class="post-image">

<div class="post-preview">

<h2> <a href="single.html">This is some text. This is not the final say on the matter.</a></h2>

<i class="far fa-user"> don juan </i>

&nbsp;

<i class="far calanderr">mar 2019</i>

<p class="preview-text"> this is also some text. This text will be a little longer as it will likely be more descriptive <p>

<a href="single.html" class="btn read-more">read more</a>

</div>

</div>

 

 

 

<div class="post">

<img src="./images/1000.jpg" class="post-image">

<div class="post-preview">

<h2> <a href="single.html"> This is some text. This is not the final say on the matter </a></h2>

<i class="far fa-user">don juan</i>

&nbsp;

<i class="far calanderr">mar 2019</i>

<p class="preview-text"> this is also some text. This text will be a little longer as it will likely be more descriptive <p>

<a href="single.html" class="btn read-more">read more</a>

</div>

</div>

 

 

<div class="post">

<img src="./images/fire2.jpg" class="post-image">

<div class="post-preview">

<h2> <a href="single.html"> This is some text. This is not the final say on the matter </a></h2>

<i class="far fa-user"> don juan </i>

&nbsp;

<i class="far calander">mar 2019</i>

<p class="preview-text"> this is also some text. This text will be a little longer as it will likely be more descriptive.</p>

<a href="single.html" class="btn read-more">read more</a>

</div>

</div>

 

 

</div>

 

 

 

<div class="sidebar">

 

<div class="section search">

<h2 class="section-title">search</h2>

<form action="index.html" method="post">

<input type="text" name="search-term" class="text-input" placeholder="search...">

</form>

</div>

 

 

 

<div class="section topics">

<h2 class="section-title">topics</h2>

<ul>

<li><a href="#>this </a></li>

<li><a href="#>should  </a></li>

<li><a href="#>beeeee </a></li>

<li><a href="#>much easier </a></li>

<li><a href="#>than this</a></li>

<li><a href="#>crap </a></li>

</ul>

</div>

</div>

 </div>

 

 

            .content{

           

            width:90%;

            margin: 30px auto 30px;

            border:1px solid red;

           

}

 

.content .main-content {

           

            width:70%;

            float:left;

            border:1px solid blue;

}

 

.content .main-content .post .post-preview{

            width:60%;

            padding:10px;

            float:right;

}

           

           

            .content .main-content .post .post-preview h2{

            color:red;

}

           

           

           

           

           

           

           

           

           

           

           

            .content .main-content .recent-post-title{

            margin: 20px;

}

 

            .content .main-content .post{

            width:95%;

            height:270px;

            margin: 20px auto;

            border-radius:5px;

            background:white;

            position:relative;

}

 

.content .main-content .post .read-more{

            position:absolute;

            bottom:10px;

            right:10px;

            border:1px solid #005255;

            background: transparent;

            border-radius: 0px;

            color: #005255 !important;

}

 

.content .main-content .post .read-more:hover{

            color:white !important;

            background:#005255;

            transition:.25s;

}

 

 

 

 

 

 

 

            .content .main-content .post .post-image{

            width:40%;

            height:100%;

            float:left;

}

 

           

           

            .clearfix {

            overflow: auto;

}

 

            .btn{

            padding: .5rem 1rem;

            background:#006669;

            color:white;

            border: 1px solid transparent;

            border-radius: .25rem;

}

 

            .btn:hover{

            color:white !important;

            background:#005255;

}

 

 

            .content  .sidebar{

            width:30%;

            float:left;

    border:1px dashed green;

            height:300px;

            }

 

            .content  .sidebar  .section {

                        background: white;

                        padding: 20px;

                        border-radius: 5px;

                        margin-bottom: 20px;

            }

 

            .content  .sidebar  .section.search {

                        margin-top: 80px;

            }

 

            .text-input{

                        padding: .7rem 1rem;

                        display:block;

                        width:100%;

                        border-radius:5px;

                        border: 1px solid #e0e0e0;

                        outline: none;

                        color: #444444;

                        line-height: 1.5rem;

                        line-size: 1.2em;

                        font-family: lora;

            }

           

                        .content  .sidebar  .section.topics ul{

                         margin:0px;

                 padding:0px;

                         list-style:none;

                          border-top: 1px solid #e0e0e0;

            }

           

                        .content  .sidebar  .section.topics ul li a {

                         display:block;

                 padding: 15px 0px 15px 0px;

                         border-bottom: 1px solid #e0e0e0;

                         transition: all 0.3s;

            }

 

            .content  .sidebar  .section.topics ul li a:hover{

                         padding-left:10px;

                         transition: all 0.3s;

            }

 

            .content  .sidebar  .section .section-title{

                        padding: 10px 0px 10px 0px;

            }