HTML and CSS help having 3 elements responsive like this

Issue

I want 3 elements in line. First two being aligned to the left and the third one being align to right. When the window is smaller I want the second going under the first while the third remains in the right, when the window gets even smaller all three under each other.

Here is an example: https://www.backyardburgers.com/

I want to make the red thing under the header with those three elements an h2 a p and an anchor which is the button.

I would like if you could show me what CSS to use if the html is the following:

<section class="location"> 
<div class="content">
    <h2>Lorem Ipsum</h2>
        <p>Lorem ipsum dolor sit amet, copiosae perpetua voluptaria in pro, laboramus scriptorem instructior in usu, duo expetenda delicatissimi in. </p>
<a class="button" href="#">Sale sonet</a>
    </div></section>

Solution

Example code with 3 divs

CSS ::::

div {
    height: 200px;
    width: 200px;
    border: 1px solid white;
    display: inline-block;
}

@media only screen and (max-width: 500px) {
    div {
        width: 100%;
    }
}

@media screen and (max-width: 900px) and (min-width: 500px) {
    div {
        display: block;
    }

   .first, .second {
        width: calc(100% - 200px);
   }

   .third{
        position: fixed;
        top: 8px;
        right: 5px;
        width: 200px;
   } 
}

@media screen and (min-width: 900px) {
   div{
        display: inline-block;
   }

   .first {
        float: left;
   }

   .second {
        width: calc(100% - 410px);
   }

   .third {
        float: right;
   }
}

Answered By - Shiladitya