Как выровнять две колонки ⇐ CSS

[Anonymous]

Код: Выделить всё

 
[img]images/search.png[/img]
 

[img]images/clear.png[/img]
 25°C 
New York




[img]images/sunrise.png[/img]
6:00 AM

[img]images/sunset.png[/img]
8:00 PM




[img]images/humidity.png[/img]


50%
Humidity



[img]images/wind.png[/img]


15mph
Wind Speed

Код: Выделить всё

*{
margin: 0;
padding: 0;
font-family: 'poppins', sans-serif;
box-sizing: border-box;
}

body{
background-color: #222;
}

.container{
width: 90%;
max-width: 470px;
background: linear-gradient(135deg, #00feba, #5b548a);
color: #fff;
margin: 100px auto 0;
border-radius: 20px;
padding: 40px 35px;
text-align: center;
}

.search-box{
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}

.search-bar {
border: 0;
outline: 0;
background: #ebfffc;
color: 555;
padding: 10px 25px;
height: 60px;
border-radius: 30px;
flex: 1;
margin-right: 16px;
font-size: 18px;
}

.search-box button{
border: 0;
outline: 0;
background: #ebfffc;
border-radius: 50%;
width: 60px;
height: 60px;
cursor: pointer;
}

.search-box button img{
width: 25px;
height: 30px;
}

.weather-icon{
width: 170px;
margin-top: 30px;
}

.weather h1{
font-size: 80px;
font-weight: 500;
}
.weather h2{
font-size: 45px;
font-weight: 400;
margin-top: -10px;
}

.details {
text-align: center;
}

.sunInfo {
display: inline-block;
justify-content: flex-end;
flex-direction: column;

justify-items: right;
align-items: right;
gap: 20px;
}

.extra-info {
display: inline-block;
flex-direction: column;
justify-content: space-between;
align-items: left;
gap: 20px;
}

.col {
display: flex;
align-items: left;
text-align: left;
}

.col img {
width: 40px;
margin-right: 10px;
}

.sunrise img, .sunset img {
width: 60px;
margin-right: 10px;

}

.humidity, .wind {
font-size: 28px;
margin-top: -6px;
}

Я хочу, чтобы extraInfo и sunInfo располагались рядом, но при этом вся информация в обоих работала бы как столбцы. Я также хочу, чтобы текст влажности и скорости ветра располагался рядом со значками, а время заката и восхода солнца также располагалось справа от значков.
Я пробовал используя inline-blocks, float, justify-items и justify-content, и ни один из них не сработал.

Подробнее здесь: https://stackoverflow.com/questions/786 ... wo-columns