HTML CSS Alignment in class skills_group - html

Question

Need help aligning those sections:
/*=============== SKILLS ===============*/
.skills__content{
row-gap: 3.5rem;
}
.skills__title{
font-size: var(--h3-font-size);
text-align: center;
margin-bottom: 1.5rem;
}
.skills__box{
display: flex;
justify-content: center;
column-gap: 3rem
}
.skills__group {
display: grid;
grid-template-columns: repeat(2, 1fr);
align-content: flex-start;
row-gap: 1rem;
}
.skills__data{
display: flex;
column-gap: .5rem;
}
.skills__data i{
font-size: 1rem;
color: var(--first-color);
}
.skills__name{
font-size: var(--normal-font-size);
font-weight: 500;
line-height: .5rem;
}
.skills__level{
font-size: var(--smaller-font-size);
}
<!-- skills -->
<div class="skills__content grid" data-content id="skills">
<div class="skills_area">
<h3 class="skills_title">
Desenvolvedor Frontend
</h3>
<div class="skills__box">
<div class="skills__group">
<div class="skills__data">
<i class="uil uil-check"></i>
<div>
<h3 class="skills__name">HTML</h3>
<span class="skills__level">Intermediário</span>
</div>
</div>
<div class="skills__data">
<i class="uil uil-check"></i>
<div>
<h3 class="skills__name">JavaScript</h3>
<span class="skills__level">Avançado</span>
</div>
</div>
<div class="skills__group">
<div class="skills__data">
<i class="uil uil-check"></i>
<div>
<h3 class="skills__name">Bootstrap</h3>
<span class="skills__level">Avançado</span>
</div>
</div>
</div>
<div class="skills__data">
<i class="uil uil-check"></i>
<div>
<h3 class="skills__name">CSS</h3>
<span class="skills__level">Intermediário</span>
</div>
</div>
</div>
</div>
</div>
<div class="skills_area">
<h3 class="skills_title">
Desenvolvedor Mobile
</h3>
<div class="skills__box">
<div class="skills__group">
<div class="skills__data">
<i class="uil uil-check"></i>
<div>
<h3 class="skills__name">Swift</h3>
<span class="skills__level">Avançado</span>
</div>
</div>
<div class="skills__data">
<i class="uil uil-check"></i>
<div>
<h3 class="skills__name">Storyboard</h3>
<span class="skills__level">Avançado</span>
</div>
</div>
<div class="skills__group">
<div class="skills__data">
<i class="uil uil-check"></i>
<div>
<h3 class="skills__name">SwiftUI</h3>
<span class="skills__level">Intermediário</span>
</div>
</div>
</div>
<div class="skills__data">
<i class="uil uil-check"></i>
<div>
<h3 class="skills__name">Kotlin</h3>
<span class="skills__level">Intermediário</span>
</div>
</div>
</div>
</div>
</div>
<div class="skills_area">
<h3 class="skills_title">
Extras
</h3>
<div class="skills__box">
<div class="skills__group">
<div class="skills__data">
<i class="uil uil-check"></i>
<div>
<h3 class="skills__name">Inglês</h3>
<span class="skills__level">Avançado</span>
</div>
</div>
<div class="skills__data">
<i class="uil uil-check"></i>
<div>
<h3 class="skills__name">MySQL</h3>
<span class="skills__level">Avançado</span>
</div>
</div>
<div class="skills__group">
<div class="skills__data">
<i class="uil uil-check"></i>
<div>
<h3 class="skills__name">Python</h3>
<span class="skills__level">Avançado</span>
</div>
</div>
</div>
<div class="skills__data">
<i class="uil uil-check"></i>
<div>
<h3 class="skills__name">Design Thinking</h3>
<span class="skills__level">Intermediário</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
So far it looks like this, I've tried everything but it seems like its dependent on the text length from the skills_data and skills_name. whenever i change it i change the formatting on the website, so it looks terrible. I've spend a lot of time trying to make it 2 columns of 2 names, and when i could do it this second bug happened.

Answer 1

edited the class ".skills__group", added "width: 55%;" to standardize the width of the items and edited the ".skills__box" class, added "margin-left: 20%;" and edited "justify-content: left;"
/*=============== SKILLS ===============*/
.skills__content{
row-gap: 3.5rem;
}
.skills__title{
font-size: var(--h3-font-size);
text-align: center;
margin-bottom: 1.5rem;
}
.skills__box{
display: flex;
justify-content: left;
column-gap: 3rem;
margin-left: 20%;
}
.skills__group {
display: grid;
grid-template-columns: repeat(2, 1fr);
align-content: flex-start;
row-gap: 1rem;
width: 55%;
}
.skills__data{
display: flex;
column-gap: .5rem;
}
.skills__data i{
font-size: 1rem;
color: var(--first-color);
}
.skills__name{
font-size: var(--normal-font-size);
font-weight: 500;
line-height: .5rem;
}
.skills__level{
font-size: var(--smaller-font-size);
}
<!-- skills -->
<div class="skills__content grid" data-content id="skills">
<div class="skills_area">
<h3 class="skills_title">
Desenvolvedor Frontend
</h3>
<div class="skills__box">
<div class="skills__group">
<div class="skills__data">
<i class="uil uil-check"></i>
<div>
<h3 class="skills__name">HTML</h3>
<span class="skills__level">Intermediário</span>
</div>
</div>
<div class="skills__data">
<i class="uil uil-check"></i>
<div>
<h3 class="skills__name">JavaScript</h3>
<span class="skills__level">Avançado</span>
</div>
</div>
<div class="skills__group">
<div class="skills__data">
<i class="uil uil-check"></i>
<div>
<h3 class="skills__name">Bootstrap</h3>
<span class="skills__level">Avançado</span>
</div>
</div>
</div>
<div class="skills__data">
<i class="uil uil-check"></i>
<div>
<h3 class="skills__name">CSS</h3>
<span class="skills__level">Intermediário</span>
</div>
</div>
</div>
</div>
</div>
<div class="skills_area">
<h3 class="skills_title">
Desenvolvedor Mobile
</h3>
<div class="skills__box">
<div class="skills__group">
<div class="skills__data">
<i class="uil uil-check"></i>
<div>
<h3 class="skills__name">Swift</h3>
<span class="skills__level">Avançado</span>
</div>
</div>
<div class="skills__data">
<i class="uil uil-check"></i>
<div>
<h3 class="skills__name">Storyboard</h3>
<span class="skills__level">Avançado</span>
</div>
</div>
<div class="skills__group">
<div class="skills__data">
<i class="uil uil-check"></i>
<div>
<h3 class="skills__name">SwiftUI</h3>
<span class="skills__level">Intermediário</span>
</div>
</div>
</div>
<div class="skills__data">
<i class="uil uil-check"></i>
<div>
<h3 class="skills__name">Kotlin</h3>
<span class="skills__level">Intermediário</span>
</div>
</div>
</div>
</div>
</div>
<div class="skills_area">
<h3 class="skills_title">
Extras
</h3>
<div class="skills__box">
<div class="skills__group">
<div class="skills__data">
<i class="uil uil-check"></i>
<div>
<h3 class="skills__name">Inglês</h3>
<span class="skills__level">Avançado</span>
</div>
</div>
<div class="skills__data">
<i class="uil uil-check"></i>
<div>
<h3 class="skills__name">MySQL</h3>
<span class="skills__level">Avançado</span>
</div>
</div>
<div class="skills__group">
<div class="skills__data">
<i class="uil uil-check"></i>
<div>
<h3 class="skills__name">Python</h3>
<span class="skills__level">Avançado</span>
</div>
</div>
</div>
<div class="skills__data">
<i class="uil uil-check"></i>
<div>
<h3 class="skills__name">Design Thinking</h3>
<span class="skills__level">Intermediário</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Answer 2

You got it right. The misalignment is caused by the unequal length of the text in the "skills_data" and "skills_name" sections.
Have you tried using a table with 2 columns to display bot sections? Set the width of the first column to a fixed value and let the remaining column fill the space.
<style>
table {
width: 100%;
}
.skill-name {
width: 120px;
padding-right: 20px;
text-align: right;
font-weight: bold;
}
.skill-data {
padding-left: 20px;
}
</style>
<table>
<tr>
<td class="skill-name">Skill 1</td>
<td class="skill-data">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pulvinar orci vel nulla lobortis, ut gravida dui aliquet.</td>
</tr>
<tr>
<td class="skill-name">Skill 2</td>
<td class="skill-data">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pulvinar orci vel nulla lobortis, ut gravida dui aliquet. Mauris malesuada ex in sapien semper, vel auctor lorem ultrices.</td>
</tr>
<tr>
<td class="skill-name">Skill 3</td>
<td class="skill-data">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
</tr>
</table>
That's just an example and you can adjust te width of the skill name column and the padding values to suit your needs.