How to align two columns

June 27, 2024

<div class="container">

    <div class="search-box">
      <input type="text" class="search-bar" placeholder="Search for a city..." spellcheck="false">
      <button> <img src="images/search.png"> </button>
    </div>
    
    <div class="weather">
      <img class="weather-icon" src="images/clear.png">
      <h1 class="temp"> 25°C </h1>
      <h2 class="city">New York</h2>
    </div>
    
    <div class="details">

      <div class="sunInfo">

        <div class="sunrise">
          <img src="images/sunrise.png">
          <p>6:00 AM</p>
        </div>

        <div class="sunset">
          <img src="images/sunset.png">
          <p>8:00 PM</p>
        </div>

      </div>

      <div class="extraInfo">

        <div class="col">
          <img src="images/humidity.png">

          <div>
            <p class="humidity">50%</p>
            <p>Humidity</p>
          </div>
        </div>

        <div class="col">
          <img src="images/wind.png">

          <div>
            <p class="wind">15mph</p>
            <p>Wind Speed</p>
          </div>

        </div>
      </div>
      </div>
    
  </div>

*{
  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;
}

I want to extraInfo and sunInfo to be side by side but still have all information in both to act as columns. I also want for the humidity and wind speed text to be to the tight of the icons and for sunset and sunrise for the time to be to the right of the icons as well.

I tried using inline-blocks, float, justify-items, and justify-content and none of them worked.

>Solution :

Use Flexbox that is easy to align extraInfo and sunInfo are side by side. Also
column with the text aligned is simple for using Flexbox.

Wrap sunInfo and extraInfo in a flex container.
Adjust the styles to ensure the icons and text align correctly.

* {
  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;
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
}

.sunInfo,
.extraInfo {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
  margin: 0 10px;
}

.sunInfo .sunrise,
.sunInfo .sunset,
.extraInfo .col {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.sunInfo img,
.extraInfo img {
  width: 60px;
  margin-right: 10px;
}

.extraInfo img {
  width: 40px;
}

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

<div class="container">
  <div class="search-box">
    <input type="text" class="search-bar" placeholder="Search for a city..." spellcheck="false">
    <button> <img src="images/search.png"> </button>
  </div>
  
  <div class="weather">
    <img class="weather-icon" src="images/clear.png">
    <h1 class="temp"> 25°C </h1>
    <h2 class="city">New York</h2>
  </div>
  
  <div class="details">
    <div class="sunInfo">
      <div class="sunrise">
        <img src="images/sunrise.png">
        <p>6:00 AM</p>
      </div>

      <div class="sunset">
        <img src="images/sunset.png">
        <p>8:00 PM</p>
      </div>
    </div>

    <div class="extraInfo">
      <div class="col">
        <img src="images/humidity.png">
        <div>
          <p class="humidity">50%</p>
          <p>Humidity</p>
        </div>
      </div>

      <div class="col">
        <img src="images/wind.png">
        <div>
          <p class="wind">15mph</p>
          <p>Wind Speed</p>
        </div>
      </div>
    </div>
  </div>
</div>

Please check this,