# Using CSS, surely there is a better way to write this Flex code?

I needed some help with Flex. I am trying to achieve something like this using flex but I cant seem to align all the items to the left for both. The code I provided below works just fine, but I'm sure there has to be a better way to do it but nothing seems to be working for me.

Here is a CodePen Link for anyone who would like to help me.

<div class="sidebar">
<nav class="sidebar-nav">
<div class="sidebar-nav-line">
<div class="sidebar-nav-text">
<p>Home</p>
</div>
<div class="sidebar-nav-icon">
<img class="sidebar-nav-icon-img" src="assets/img/sidebar-icons/home.png" alt="Home-Icon">
</div>
</div>
<div class="sidebar-nav-line">
<div class="sidebar-nav-text">
</div>
<div class="sidebar-nav-icon">
</div>
</div>
<div class="sidebar-nav-line">
<div class="sidebar-nav-text">
<p>Projects</p>
</div>
<div class="sidebar-nav-icon">
<img class="sidebar-nav-icon-img" src="assets/img/sidebar-icons/projects.png" alt="Projects-Icon">
</div>
</div>
<div class="sidebar-nav-line">
<div class="sidebar-nav-text">
<p>Resume</p>
</div>
<div class="sidebar-nav-icon">
<img class="sidebar-nav-icon-img" src="assets/img/sidebar-icons/resume.png" alt="Resume-Icon">
</div>
</div>
<div class="sidebar-nav-line">
<div class="sidebar-nav-text">
<p>Contact</p>
</div>
<div class="sidebar-nav-icon">
<img class="sidebar-nav-icon-img" src="assets/img/sidebar-icons/contact.png" alt="Contact-Icon">
</div>
</div>
</nav>
</div>


CSS

.sidebar {
background-color: #2C2C2C;
width: 255px;
height: 100vh;
}

.sidebar-nav {
text-align: center;
}

.sidebar-nav-line {
display: flex;
flex-direction: row;
justify-content: flex-end;
}

.sidebar-nav-text{
margin-right: 15px;
align-self: center;
color: #dec29b98;
text-transform: uppercase;
font-size: 20px;
}

.sidebar-nav-icon {
margin-right: 32px;
align-self: center;
}

.sidebar-nav-icon-img {
width: 30px;
height: 30px;
}

• Welcome to Code Review! The description is confusing because it states "but I cant seem to align all the items to the left for both." then goes on to state: "The code I provided below works just fine..." Does this work to the best of your knowledge? Jun 16 at 15:54
• It does work, I just wanted to know if there is a better way to do it. For now, i have stuck to using padding or margins to achieve what i am trying. Jun 17 at 0:26
• Use Flex and flex-direction just like div, I will post the example using Flex and direction. Jun 21 at 6:56

I played a little with css and ended up with this. I don't know if it's really what you wanted, but maybe it can help you get some new ideas.

*{margin: 0;font-family: "Poppins", sans-serif;}
html{background-color:#1c1c20;}
.col{
display:grid;
width:200px;
background-color:#2c2c2c;
height:100vh;
}
width:95%;
}
.box{
text-align:right;
color:#dec29b98;
}
.box > div{
margin-right:10px;
display:inline-block;
vertical-align: middle;
cursor:pointer;
}
<div class="col">

<div class="box">
<div><img src="https://i.stack.imgur.com/T5uTa.png"></div>
</div>

<div class="box">
</div>