Tailwind - css - flex placement - flexbox

Question

I have a footer with some list items and then some social media icons. I want to move the social media items to the right of the footer. How would I achieve this? I have been playing around with flex but nothing is working yet.
<div className="mx-20 mb-20">
<Divider style={{ background: '#5E5E5E96' }} orientation="horizontal" />
<div className="mt-8 w-full flex">
<div>
<ul className="flex">
<span className="ml-8 mr-20">
<li>©2022 {name}</li>
</span>
<span className="flex space-x-20">
<li>Cookie Policy</li>
<li>Refund Policy</li>
<li>Privacy Policy</li>
<li>Terms & Conditions</li>
</span>
</ul>
</div>
<div className="icons flex">
<img src={InstagramIcon} alt="Instagram icon" />
<img src={FacebookIcon} alt="Facebook icon" />
<img src={TwitterIcon} alt="Twitter icon" />
<img src={Linkedin} alt="Linkedin icon" />
</div>
</div>
</div>
So I want the icons to be the same distance from the right as the first list item is from the left.

Answer 1

You can do this in multiple ways:
add justify-between
add ml-auto to the item you want to move.
In both cases, your flex container has to be 100% wide w-full.

Answer 2

You can add justify-between or justify-evenly on the outer most div that wraps both the list and the icons.
Below is the code
<div className="mx-20 mb-20">
<Divider style={{ background: '#5E5E5E96' }} orientation="horizontal" />
<div className="mt-8 w-full flex items-center justify-between">
<div>
<ul className="flex">
<span className="ml-8 mr-20">
<li>©2022 {name}</li>
</span>
<span className="flex space-x-20">
<li>Cookie Policy</li>
<li>Refund Policy</li>
<li>Privacy Policy</li>
<li>Terms & Conditions</li>
</span>
</ul>
</div>
<div className="icons flex">
<img src={InstagramIcon} alt="Instagram icon" />
<img src={FacebookIcon} alt="Facebook icon" />
<img src={TwitterIcon} alt="Twitter icon" />
<img src={Linkedin} alt="Linkedin icon" />
</div>
</div>
</div>
items-center is align them vertically