'How do I make these 2 divs stand next to each other?

I don't quite know how to explain this but I want to make these 2 stand next to eachother and I don't know how.

Please note that these need the follow CSS properties: Display: flex Justify-content: space-evenly; flex-direction: column

HTML code:

<div class="cards2">
  <div class="sectiontitle">
    <div class="infoeu1">
      <h2>Racks</h2>
    </div>
  </div>
  <div class="card2">
    <img src="/images/operational.png" alt="">
    <div class="infoeu1">
      <h2>EU CENTRAL-01</h2>
      <p><strong>Operational.</strong></p>
    </div>
  </div>
  <div class="card2">
    <img src="/images/exp_issues.png" alt="">
    <div class="infoeu2">
      <h2>EU CENTRAL-02</h2>
      <p><strong>Experiencing Issues...</strong></p>
    </div>
  </div>
  <div class="card2">
    <img src="/images/notmonitored.png" alt="">
    <div class="infoeu3">
      <h2>EU CENTRAL-03</h2>
      <p><strong>Not monitored</strong></p>
    </div>
  </div>
  <div class="card2">
    <img src="/images/maintenance.png" alt="">
    <div class="infoeu4">
      <h2>EU CENTRAL-04</h2>
      <p><strong>Under Maintenance.</strong></p>
    </div>
  </div>
</div>

The first picture is how it currently looks, and the second one is how I want them to look. I want them next to each other please.

enter image description here

enter image description here

htmlcssruby-on-rails


Solution 1:[1]

You can wrap both div (the one containing your racks info and the other containing your VPS Nodes info) in a parent div element and then, give this parent element a property of display:flex and also a gap to separate each other a little bit.

Let me know if that helps.

Solution 2:[2]

For such things you can create a method that just acts as a wrapper to handle the cache-or-not condition:

def main_logic_here
  ... expensive calculation
end

def main_logic_wrapper
  if true
    main_logic_here
  else
    Rails.cache.fetch(...) { main_logic_here }
  end
end

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 ivanatias
Solution 2 de-russification

Related Questions