Css как выровнять мои круги по горизонтали после слова

Я хотел бы показать круги для разных уровней. Например, если уровень является опытным, он покажет 1 круг. Я могу показать круги в соответствии с их уровнями, но круг отображается вертикально. Я хочу, чтобы он показывал это горизонтально.

for($a = 0; $a < $count; $a++)
{
$b = $languagelevel[$a][0];
echo $b;
if($languagelevel[$a][1] == "Proficient")
{
for($i = 0; $i < 1; $i++)
{
echo "<div class='language'></div>";
}
}
else if($languagelevel[$a][1] == "Good")
{
for($i = 0; $i < 2; $i++)
{
echo "<div class='language'></div>";
}
}
else if($languagelevel[$a][1] == "Very Good")
{
for($i = 0; $i < 3; $i++)
{
echo "<div class='language'></div>";
}
}
else
{
for($i = 0; $i < 4; $i++)
{
echo "<div class='language'></div>";
}
}

echo "<br>";

Это мой код CSS для круга. Это покажет круги по вертикали, но я хочу это по горизонтали.

.language
{
border-radius: 50%;width: 20px;
height: 20px;
padding: 8px;

background: #fff;
border: 2px solid #666;
color: #666;font: 20px Arial, sans-serif;
}