css align right and left at the same time - html

Question

I have a problem with displaying this(check this picture)
I have a link on the left and icons with words under it on the right. What is the right way to display it? and how can I display the words under the icons? I need help with it. Please check the attached picture to see how I need it to look.
<div class="back-to-listing-clinic">
<div>
<a> < back </a>
</div>
<div class="right-icons-part">
<img class="clinic-top-icons"src="./assets/images/icons/forum.png">
<img class="clinic-top-icons" src="./assets/images/icons/forum.png">
<img class="clinic-top-icons" src="./assets/images/icons/forum.png">
</div>
<div>
<p> Icon1 </p>
<p> Icon2 </p>
<p> Icon3 </p>
</div>
</div>

Answer 1

There's a dozen ways to do this. I replaced your images with icons for demonstration purposes.
This method just sets the "left and right" parts to display: inline-block to place them next to each other, and then sets float: right on the right hand ones to separate them.
I'd consider using a CSS Framework of some kind instead - but this would be a simple way to do it with what you have.
No Framework:
* {
box-sizing: border-box;
}
.back-to-listing-clinic > div {
display: inline-block;
}
.right-icons-part {
float: right;
}
.right-icons-part:after {
content: " ";
display: block;
clear: both;
height: 0px;
}
.right-icons-part a {
text-align: center;
display: inline-block;
}
<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<div class="back-to-listing-clinic">
<div class="left">
<a> < back </a>
</div>
<div class="right-icons-part">
<i class="fas fa-comment-alt"></i><br />Icon 1
<i class="fas fa-comment"></i><br />Icon 2
<i class="fas fa-comments"></i><br />Icon 3
</div>
</div>
Super simple Ungrid framework
#media (min-width: 30em) {
.row { width: 100%; display: table; table-layout: fixed; }
.col { display: table-cell; }
}
.right {
text-align: right;
}
.right-icons-part a {
display: inline-block;
text-align: center;
}
<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<div class="row back-to-listing-clinic">
<div class="col left">
<a> < back </a>
</div>
<div class="col right right-icons-part">
<i class="fas fa-comment-alt"></i><br />Icon 1
<i class="fas fa-comment"></i><br />Icon 2
<i class="fas fa-comments"></i><br />Icon 3
</div>
</div>