How to use CSS to create a 2nd card next to another one, side by side to display information?

Question

I have created a weather "page" project using HTML, CSS and javascript.

I want to create a seperate card to display map informations and put it next to the other card that displays the weather information.

I want this (ignore the language, it's in greek, my native language):

code:

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  font-family: 'Open Sans', sans-serif;
  background: #222;
  background-image: url('https://source.unsplash.com/1600x900/?landscape');
  font-size: 115%;
}

.card {
  background: #000000d0;
  color: white;
  padding: 2em;
  border-radius: 30px;
  width: 100%;
  max-width: 420px;
  margin: 1em;
  margin-top: 5%;
  margin-right: 40%;
  
}

.search {
  display: flex;
  align-items: center;
  justify-content: center;
}
.city {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 200%;
}
button {
  margin: 0.5em;
  border-radius: 50%;
  border: none;
  height: 44px;
  width: 44px;
  outline: none;
  background: #7c7c7c2b;
  color: white;
  cursor: pointer;
  transition: 0.2s ease-in-out;
}

input.search-bar {
  border: none;
  outline: none;
  padding: 0.4em 1em;
  border-radius: 24px;
  background: #7c7c7c2b;
  color: white;
  font-family: inherit;
  font-size: 105%;
  width: calc(100% - 100px);
}

button:hover {
  background: #7c7c7c6b;
}

h1.temp {
  margin: 0;
  margin-bottom: 0.4em;
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

.description {
  text-transform: capitalize;
  margin-left: 8px;
  margin-top: 20px;
}

.icon{
  margin-top: 3px;
}
.weather.loading {
  visibility: hidden;
  max-height: 20px;
  position: relative;
}

.weather.loading:after {
  visibility: visible;
  content: "Loading...";
  color: white;
  position: absolute;
  top: 0;
  left: 20px;
}
.coord {
  color:rgb(221, 218, 215);
  margin-left: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.coord-list{
   display: flex; 
  justify-content: center;
  align-items: center;
  color:rgb(221, 218, 215);
  font-size: 85%;
  margin: 0;
  margin-top: -10px;
}

.icon-sunrise {
  margin-left: 4px;
}
.icon-sunset {
  margin-left: 4px;
}



.feels-like {
    display: flex;
    flex-wrap: wrap; 
    justify-content: center;
  align-items: center;
  margin-top: 5px;
  font-size: 85%

}

p {
  display: flex;
    flex-wrap: wrap; 
    justify-content: center;
  align-items: center;
  margin-top: -10px;
  font-size: 85%
}

.local-time {
  margin-top: -20px;
  margin-bottom: 20px;
  font-size: 110%
}

#time-icon{
  margin-top: 20px;
  margin-bottom: -2px;

  margin-left: 4px;
}

.date {
  font-size: 80%;
  display: flex;
  justify-content: center;
  align-items: center;

}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Weather App</title>
  <link rel="preconnect" href="https://fonts.gstatic.com">
  
  <link rel="stylesheet" href="./style.css">

</head>

<body>

  <script src="https://momentjs.com/downloads/moment.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment-with-locales.min.js"></script>
 <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 
  <script src="./script.js" defer></script>
  

  <div class="card">
    
    <div class="search">
      <input type="text" class="search-bar" placeholder="Search">
      <button><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 1024 1024" height="1.5em"
          width="1.5em" xmlns="http://www.w3.org/2000/svg">
          <path
            d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z">
          </path>
        </svg></button>
    </div>
    <div class="weather loading">
      <hr>
      <div class="date">Date: </div>
      <hr>
      <h2 class="city">Weather in Denver</h2>
      <div class="local-time" style="text-align: center;">
      <span class="time">Time: </span>
      <svg id="time-icon"stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 1024 1024" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"></path></svg>
      </div>
      <hr>
      <h4 class="coord">Γεωγραφικές Συντεταγμένες:</h4>
      <ul class="coord-list">
        <li class="lon">Γεωγραφικό μήκος (longitude): </li>
        <li class="lat">Γεωγραφικό πλάτος (latitude):</li>
      </ul>
      
      <hr>
      <div class="flex">
        <img src="https://openweathermap.org/img/wn/04n.png" alt="" class="icon" />
        <h3 class="description">Cloudy</h3>
      </div>
      <h1 class="temp">51°C</h1>
      <p class="feels-like">Feels like:</p>
      <p class="temp_min">Temp min: </p>
      <p class="temp_max">Temp max: </p> 
      <hr>
      <div class="humidity">Humidity: 60%</div>
      <div class="visibility">Visibility: </div>
      <div class="cloudiness">clouds:</div>
      <div class="pressure">Πιεση:</div>
      <div class="wind">Wind speed: 6.2 km/h</div>
      <div class="wind-deg">Wind deg: </div>
      <div class="wind-gust">Wind gust: </div> 
      <hr>
      <span class="sunrise">Sunrise: </span>
      <svg class ="icon-sunrise" stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M17 18a5 5 0 0 0-10 0"></path><line x1="12" y1="2" x2="12" y2="9"></line><line x1="4.22" y1="10.22" x2="5.64" y2="11.64"></line><line x1="1" y1="18" x2="3" y2="18"></line><line x1="21" y1="18" x2="23" y2="18"></line><line x1="18.36" y1="11.64" x2="19.78" y2="10.22"></line><line x1="23" y1="22" x2="1" y2="22"></line><polyline points="8 6 12 2 16 6"></polyline></svg>
      <br>
      <span class="sunset">Sunset: </span>
      <svg class="icon-sunset" stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M17 18a5 5 0 0 0-10 0"></path><line x1="12" y1="9" x2="12" y2="2"></line><line x1="4.22" y1="10.22" x2="5.64" y2="11.64"></line><line x1="1" y1="18" x2="3" y2="18"></line><line x1="21" y1="18" x2="23" y2="18"></line><line x1="18.36" y1="11.64" x2="19.78" y2="10.22"></line><line x1="23" y1="22" x2="1" y2="22"></line><polyline points="16 5 12 9 8 5"></polyline></svg>
     </div>
  
</body>
</html>

How can I achieve this? I want the 2nd card to be the same style as the 1st card.

Thank you and sorry for my lack of knowledge, I am a begginer.

Your question basically boils down to, "how can I get two div elements shown next to each other" - and that is something you should be able to easily research by yourself, this is anything but a new topic/problem. — CBroe, Feb 10 '22 at 11:03
Many possible ways, using float, display, grid ... Take a look [here](https://stackoverflow.com/questions/5803023/how-to-place-two-divs-next-to-each-other) — Sven, Feb 10 '22 at 11:07

score 1 · Answer 1 · answered Feb 10 '22 at 11:21

I'm not 100% sure this is the best way to do it since I usually use bootstrap to manage the styles. But something you can do is encase both cards in a flex div and make that div a flexbox, the code would look like so:

html:

<div class="flexbox">
    <div class="card">
        [...]
    </div>
    <div class="card">
        [...]
    </div>
</div>

css:

  .flexbox {
      display: flex;
  }
  .card {
      margin-right: 5%;
  }

How to use CSS to create a 2nd card next to another one, side by side to display information?

1 Answers1