HTML and CSS help having 3 elements responsive like this - html

Question

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 wich 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>

Answer 1

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;
}
}

Answer 2

Here is a simple turnaround :
.location {
background: #d00807;
color: #fff;
padding: 20px;
position: relative;
}
.location h2 {
display: inline-block;
margin: 0px;
vertical-align: middle;
}
.location p {
display: inline-block;
margin: 0px;
margin-left: 10px;
vertical-align: middle;
}
.location a.button {
background: transparent;
border: 1px solid #fff;
text-decoration: none;
color: #fff;
padding: 10px;
position: absolute;
right: 20px;
top: 50%;
margin-top: -20px;
}
#media (max-width:768px) {
.location h2 {
display: block;
margin-bottom: 10px;
}
.location p {
width: 50%;
margin-left: 0px;
}
}
<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>