multiple div containers with different floatings in one row - html

Question

I want to achieve something like this
and I thought about using a flexbox to put these items in one row.
#container {
display: flex;
}
<div id="container">
<div class="box">
<p>
Text Box 1.1
</p>
<p>
Text Box 1.2
</p>
</div>
<div class="box">
<p>
<a>Link</a>
</p>
<p>
Text Box 2
</p>
</div>
<div class="box">
<p>
Text Box 3.
</p>
</div>
</div>
The first and the second div container should have the default alignment on the left side. The third container should be aligned at the right side of the parent container.
I don't want to use flex: 1 because on large screen sizes the spacing between div 1 and 2 would be too big. They should be placed close to each other.
When the screen size gets smaller, the space between the second and the third container should get smaller until the third container is next to the second container. To prevent the overlap I simply want to remove the flexbox with
#media(max-width: 500px){ /* just a sample width */
#container{
display: block
}
}
How can I achieve that?

Answer 1

This could be a solution to your problem. I added <div id="separator"> to separate (box 1 & 2) from (box 3). After that I used justify-content: space-between; on the main containerSee demo below:
#container {
display: flex;
justify-content: space-between;
}
#separator{
display: flex;
}
.box{
border: 1px solid black;
}
#media screen and (max-width: 500px) { /* just a sample width */
#container, #separator{
display: block;
}
}
<div id="container">
<div id="separator">
<div class="box">
<p>
Text Box 1.1
</p>
<p>
Text Box 1.2
</p>
</div>
<div class="box">
<p>
<a>Link</a>
</p>
<p>
Text Box 2
</p>
</div>
</div>
<div class="box">
<p>
Text Box 3.
</p>
</div>

Answer 2

No need to add extra HTML just add margin-left:auto to the last box
#container {
display: flex;
}
.box {
border: 1px solid green;
margin: 0 .25em
}
.box:last-child {
margin-left: auto;
}
<div id="container">
<div class="box">
<p>
Text Box 1.1
</p>
<p>
Text Box 1.2
</p>
</div>
<div class="box">
<p>
<a>Link</a>
</p>
<p>
Text Box 2
</p>
</div>
<div class="box">
<p>
Text Box 3.
</p>
</div>
</div>