title: How to add an image on right side of the below demo?
body: <p>I have found an awesome HTML and CSS stacked card article in CSS-tricks. In that demo there is no image, but I want to add an image on the right side of the card in the below code, attached an image for reference. I have tried with all my knowledge but I couldn't make it look like in the image I have attached. Could anyone please help me?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.wrapper {
       margin-top: 100px;
       padding-top: 150px;
       padding-bottom: 1000px;
       max-width: 700px;
       margin: 0 auto;
       font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  }
   .card1, .card2, .card3, .card4, .card5, .card6, .card7 {
       top: 30px;
       position: sticky;
       border: 1px solid #ccc;
       box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
       background-color: white;
       color: #333;
       padding: 40px;
       border-radius: 10px;
       margin-bottom: 20px;
     height: 380px;
  }
   
   .card1:nth-child(1n) {
       top: 20px;
  }
   .card2:nth-child(2n) {
       top: 40px;
  }
   .card3:nth-child(3n) {
       top: 60px;
  }
   .card4:nth-child(4n) {
       top: 80px;
  }
   .card5:nth-child(5n) {
       top: 100px;
  }
   .card6:nth-child(6n) {
       top: 120px;
  }
   .card7:nth-child(7n) {
       top: 140px;
  }
   .card:nth-child(8n) {
       top: 160px;
  }
  .card1{
      background-color: #CAC5F5;
  }
  .card2{
      background-color: #C0FFD6
  }
  .card3{
      background-color: #FCF4B0
  }
  .card4{
      background-color: #FFB1B0
  }
  .card5{
      background-color: #8AC9FF
  }
  .classname {
      background-color:#44c767;
      
  text-indent:0;
      display:inline-block;
      color:#ffffff;
      font-size:15px;
      font-style:normal;
  height:50px;
      line-height:50px;
  width:140px;
      text-decoration:none;
      text-align:center;
  }.classname:hover {
      background-color:#5cbf2a;
  }.classname:active {
      position:relative;
      top:1px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="wrapper"&gt;
    &lt;div class="card1"&gt;
      &lt;h2&gt;&lt;span&gt;Project #1&lt;/span&gt;Title of the Project&lt;/h2&gt;
      &lt;p&gt;Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum, perspiciatis blanditiis accusamus commodi consectetur id tempora rem iure eligendi quos eos et autem ratione exercitationem earum laborum ad a sequi!&lt;/p&gt;
      &lt;a href="#" class="classname"&gt;Know More&lt;/a&gt;
      
   
      
    &lt;/div&gt;
    &lt;div class="card2"&gt;
      &lt;h2&gt;&lt;span&gt;Project #2&lt;/span&gt;Title of the Project&lt;/h2&gt;
      &lt;p&gt;Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum, perspiciatis blanditiis accusamus commodi consectetur id tempora rem iure eligendi quos eos et autem ratione exercitationem earum laborum ad a sequi!&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="card3"&gt;
      &lt;h2&gt;&lt;span&gt;Project #3&lt;/span&gt;Title of the Project&lt;/h2&gt;
      &lt;p&gt;Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum, perspiciatis blanditiis accusamus commodi consectetur id tempora rem iure eligendi quos eos et autem ratione exercitationem earum laborum ad a sequi!&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="card4"&gt;
      &lt;h2&gt;&lt;span&gt;Project #4&lt;/span&gt;Title of the Project&lt;/h2&gt;
      &lt;p&gt;Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum, perspiciatis blanditiis accusamus commodi consectetur id tempora rem iure eligendi quos eos et autem ratione exercitationem earum laborum ad a sequi!&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="card5"&gt;
      &lt;h2&gt;&lt;span&gt;Project #5&lt;/span&gt;Title of the Project&lt;/h2&gt;
      &lt;p&gt;Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum, perspiciatis blanditiis accusamus commodi consectetur id tempora rem iure eligendi quos eos et autem ratione exercitationem earum laborum ad a sequi!&lt;/p&gt;
    &lt;/div&gt;
   
   
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p><a href="https://i.stack.imgur.com/fv59E.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fv59E.png" alt="enter image description here" /></a></p>