Используя следующий код HTML, стилизуйте список описаний, чтобы получить результат, показанный на рис. 1.
<dl class="rome">
<dt>Юпитер</dt>
<dd>Верховный бог, повелитель неба, грома и молний.</dd>
<dt>Юнона</dt>
<dd>Богиня брака, семьи и рождения, покровительница женщин, супруга Юпитера.</dd>
<dt>Нептун</dt>
<dd>Бог морей и океанов, брат Юпитера.</dd>
<dt>Марс</dt>
<dd>Бог войны, также защитник земледельцев.</dd>
<dt>Венера</dt>
<dd>Богиня любви, красоты и плодородия.</dd>
</dl>
Рис. 1
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Список</title>
<style>
.rome {
display: flex;
flex-wrap: wrap;
& > dt {
color: maroon;
flex-basis: 20%;
}
& > dd {
flex-basis: 70%;
margin-left: 0;
margin-bottom: 1em;
}
}
</style>
</head>
<body>
<dl class="rome">
<dt>Юпитер</dt>
<dd>Верховный бог, повелитель неба, грома и молний.</dd>
<dt>Юнона</dt>
<dd>Богиня брака, семьи и рождения, покровительница женщин, супруга Юпитера.</dd>
<dt>Нептун</dt>
<dd>Бог морей и океанов, брат Юпитера.</dd>
<dt>Марс</dt>
<dd>Бог войны, также защитник земледельцев.</dd>
<dt>Венера</dt>
<dd>Богиня любви, красоты и плодородия.</dd>
</dl>
</body>
</html>