What changes i should make in this Css - html

Question

What should I change in the following code to get my output right?
I want the skills and the bullets side-by-side but it's coming on the top of the skills.
I tried looking at different references but it spoiled my layout even more.
Below are my HTML and CSS codes:
.skills__content,
.languages__content {
grid-template-columns: repeat(2, 1fr);
}
.skills__content,
.experience__content {
gap: 1;
}
.languages__content {
gap: 0;
}
.skills__name,
.languages__name {
display: flex;
align-items: center;
margin-bottom: var(--mb-3);
}
.skills__circle,
.languages__circle {
display: inline-block;
width: 5px;
height: 5px;
background-color: var(--text-color);
border-radius: 50%;
margin-right: 0.75rem;
}
<!-- Skills -->
<section class="skills section" id="skills">
<h2 class="section-title">Skills</h2>
<div class="skills__content bd-grid">
<ul class="skills__data">
<li class="skills__name">
<span class="skills__circle">C </span>
</li>
<li class="skills__name">
<span class="skills__circle">C++</span>
</li>
<li class="skills__name">
<span class="skills__circle">Python</span>
</li>
<li class="skills__name">
<span class="skills__circle">Java</span>
</li>
<li class="skills__name">
<span class="skills__circle">Linux</span>
</li>
</ul>
<ul class="skills__data">
<li class="skills__name">
<span class="skills__circle">Html</span>
</li>
<li class="skills__name">
<span class="skills__circle">Css</span>
</li>
<li class="skills__name">
<span class="skills__circle">Javascript</span>
</li>
<li class="skills__name">
<span class="skills__circle">React.js</span>
</li>
<li class="skills__name">
<span class="skills__circle">Firebase</span>
</li>
</ul>
<ul class="skills__data">
<li class="skills__name">
<span class="skills__circle">MYSQL</span>
</li>
<li class="skills__name">
<span class="skills__circle">Excel</span>
</li>
</ul>
</div>
</section>
Attaching pics for references:
This is how it is right now
and This is how I want it to look,

Answer 1

You can do like this by adding some properties to <li> tag also . Below is the correct implementation.
Removed some unnecessary styling also
ul {
display: grid;
grid-template-columns: repeat(2,1fr);
list-style: none;
grid-row-gap: 20px;
}
li {
display: flex;
flex-direction: row;
}
.skills__name {
align-items: center;
}
.skills__circle,
.languages__circle {
display: flex;
align-items: center;
justify-content: left;
width: 5px;
height: 5px;
background-color: green;
border-radius: 50%;
margin-right: 5px;
}
<section class="skills section" id="skills">
<h2 class="section-title">Skills</h2>
<div class="skills__content">
<ul class="skills__data">
<li class="skills__name">
<span class="skills__circle"> </span>C
</li>
<li class="skills__name">
<span class="skills__circle"></span>C++
</li>
<li class="skills__name">
<span class="skills__circle"></span>Python
</li>
<li class="skills__name">
<span class="skills__circle"></span>Java
</li>
<li class="skills__name">
<span class="skills__circle"></span>Linux
</li>
</ul>
<ul class="skills__data">
<li class="skills__name">
<span class="skills__circle"></span>Html
</li>
<li class="skills__name">
<span class="skills__circle"></span>Css
</li>
<li class="skills__name">
<span class="skills__circle"></span>Javascript
</li>
<li class="skills__name">
<span class="skills__circle"></span>React.js
</li>
<li class="skills__name">
<span class="skills__circle"></span>Firebase
</li>
</ul>
<ul class="skills__data">
<li class="skills__name">
<span class="skills__circle"></span>MYSQL
</li>
<li class="skills__name">
<span class="skills__circle"></span>Excel
</li>
</ul>
</div>
</section>