Используя приведённый код HTML, добавьте к нему стили, чтобы получить результат, показанный на рис. 1.
Рис. 1
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Метки</title>
</head>
<body>
<div class="flex-container">
<span>Афганская лисица</span>
<span>Корсак</span>
<span>Песец</span>
<span>Песчаная лисица</span>
<span>Рыжая лисица</span>
<span>Тибетская лисица</span>
<span>Фенек</span>
</div>
<div class="flex-container" lang="ar">
<span>ثعلب أفغاني</span>
<span>ثعلب السهوب</span>
<span>ثعلب قطبي</span>
<span>ثعلب الرمل</span>
<span>الثعلب الأحمر</span>
<span>ثعلب التبت</span>
<span>ثعلب الفنك</span>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Метки</title>
<style>
.flex-container {
display: flex;
flex-wrap: wrap;
}
.flex-container > span {
background-color: #ff731f;
color: #fff;
padding: 0.3rem 0.5rem;
margin: 0.5rem;
border-radius: 5px;
}
.flex-container[lang="ar"] {
direction: rtl;
}
.flex-container[lang="ar"] > span {
background-color: #27be69;
}
</style>
</head>
<body>
<div class="flex-container">
<span>Афганская лисица</span>
<span>Корсак</span>
<span>Песец</span>
<span>Песчаная лисица</span>
<span>Рыжая лисица</span>
<span>Тибетская лисица</span>
<span>Фенек</span>
</div>
<div class="flex-container" lang="ar">
<span>ثعلب أفغاني</span>
<span>ثعلب السهوب</span>
<span>ثعلب قطبي</span>
<span>ثعلب الرمل</span>
<span>الثعلب الأحمر</span>
<span>ثعلب التبت</span>
<span>ثعلب الفنك</span>
</div>
</body>
</html>