How to Stack these two cards horizontally

Developer help
1

Capture
Capture192×565 6.13 KB 

<div class="card-front">
  <figure>
    <figure>
    <figcaption>Binance-Pros</figcaption>
    
  </figure>
  • Ghost started out as a little idea
  • Ghost started out as a little idea
  • Ghost started out as a little idea
  • Ghost started out as a little idea
  • Ghost started out as a little idea
<div class="card-back">
   <figure>
    <figcaption>Binance-Cons</figcaption>
  </figure>

  <ul>
    <li>Ghost started out as a little idea</li>
    <li>Ghost started out as a little idea</li>
    <li>Ghost started out as a little idea</li>
    <li>Ghost started out as a little idea</li>
    <li>Ghost started out as a little idea</li>
  </ul>

  <div class="design-container">
    <span class="design design--1"></span>
    <span class="design design--2"></span>
    <span class="design design--3"></span>
    <span class="design design--4"></span>
    <span class="design design--5"></span>
    
  </div>
</div>

<!-- flip-card-container -->

<div class="card-front">
  <figure>
    <figure>
    <figcaption>Binance-Pros</figcaption>
    
  </figure>
  • Ghost started out as a little idea
  • Ghost started out as a little idea
  • Ghost started out as a little idea
  • Ghost started out as a little idea
  • Ghost started out as a little idea
<div class="card-back">
   <figure>
    <figcaption>Binance-Cons</figcaption>
  </figure>

  <ul>
    <li>Ghost started out as a little idea</li>
    <li>Ghost started out as a little idea</li>
    <li>Ghost started out as a little idea</li>
    <li>Ghost started out as a little idea</li>
    <li>Ghost started out as a little idea</li>
  </ul>

  <div class="design-container">
    <span class="design design--1"></span>
    <span class="design design--2"></span>
    <span class="design design--3"></span>
    <span class="design design--4"></span>
    <span class="design design--5"></span>
    
  </div>
</div>
@import url('https://fonts.googleapis.com/css?family=Lato'); /* default */ *, *::after, *::before { box-sizing: border-box; } /* .flip-card-container */ .flip-card-container { --hue: 150; --primary: hsl(var(--hue), 50%, 50%); --white-1: hsl(0, 0%, 90%); --white-2: hsl(0, 0%, 80%); --dark: hsl(282.9,15.8%,26.1%); ; width: 310px; height: 500px; margin: 40px; perspective: 1000px; } /* .flip-card */ .flip-card { width: inherit; height: inherit; position: relative; transform-style: preserve-3d; transition: .6s .1s; } /* hover and focus-within states */ .flip-card-container:hover .flip-card, .flip-card-container:focus-within .flip-card { transform: rotateY(180deg); } /* .card-... */ .card-front, .card-back { width: 100%; height: 100%; border-radius: 24px; background: var(--dark); position: absolute; overflow-x: auto backface-visibility: hidden; display: flex; justify-content: center; align-items: center; } /* .card-front */ .card-front { transform: rotateY(0deg); z-index: 2; } /* .card-back */ .card-back { transform: rotateY(180deg); z-index: 1; } /* figcaption */ figcaption { display: block; width: auto; margin-top: 12%; padding: 8px 22px; font-weight: bold; line-height: 1.6; letter-spacing: 2px; word-spacing: 6px; text-align: right; position: absolute; top: 0; right: 12px; color: var(--white-1); background: hsla(var(--hue), 25%, 10%, .5); } /* ul */ ul { padding-top: 10%; margin: 0 auto; width: 100%; height: 100%; list-style: none; color: var(--white-1); display: flex; justify-content: center; align-items: center; flex-direction: column; } /* li */ li { width: 100%; margin-top: 12px; padding-bottom: 12px; font-size: 15.5px; text-align: center; position: relative; } li:nth-child(2n) { color: var(--white-2); } li:not(:last-child)::after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: currentColor; opacity: .2; } }