<div class="container">
  <div class="main">
      <h5>Card Layout in Main Section</h5>
      <div class="card">
    <h3 class="card-title">
      Lorem ipsum dolor sit amet consectetur.
    </h3>
     <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus provident nemo, incidunt nobis reprehenderit nam eius fuga totam asperiores ipsum saepe ducimus quam repudiandae quo architecto, rem debitis officia aut?</p>
    <img src="//source.unsplash.com/700x400?cat">
     <button>Check More</button>
</div>
  </div>
  <div class="sidebar">
      <h5>Card Layout in Sidebar Section</h5>
      <div class="card">
    <h3 class="card-title">
      Lorem ipsum dolor sit amet consectetur.
    </h3>
     <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus provident nemo, incidunt nobis reprehenderit nam eius fuga totam asperiores ipsum saepe ducimus quam repudiandae quo architecto, rem debitis officia aut?</p>
    <img src="//source.unsplash.com/700x401?cat">
     <button>Check More</button>
</div>
  </div>
</div>
*{
  font-family:Arial;
}

img{
  max-width:100%;
}

h3{
  margin-bottom:0px;
  margin-top:0px;
  padding:10px 0;
  transition:200ms ease-in-out all;
}

.container{
  display:grid;
  grid-template-columns:6fr 2fr;
  gap:20px;
}

.card{
  padding:10px;
  box-shadow:20px 20px 20px #00000044;
  background:#efefef;
  display:flex;
  gap:10px;
  flex-direction:column;
  container-type: inline-size;
  container-name: my-card-container ;
}

@media (max-width:600px) {
 .container{
    display:flex;
    flex-direction:column;
    gap:20px;
  }
}

@container my-card-container (max-width:200px){
  p{
    display:none
  }
}

@container my-card-container (min-width:800px){
  h3{
    font-size:3rem;
  }
  img{
    max-height:200px;
    object-fit:cover;
  }
}


External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.