<h1 class="desc">View in fullscreen and resize to see how this shopping card would <br>adapt to different width sizes  based off the size of it's parent container</h1>
<div class="container">
        <div class="shopping-card">
            <div class="img-container">
                <img src="https://images.unsplash.com/photo-1501045661006-fcebe0257c3f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" alt="Product">
            </div>
            <div class="product-info">
                <svg class="see-more" width="14" height="14" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" color="#000"><path d="M0 0h24v24H0z" fill="none"></path><path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"></path></svg>
                <h1>Workshift Chair</h1>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quidem.lorem ipsum</p>
              <p class="more-info">Here's just more information about the product that frankly you don't really need!</p>
                <p class="product-price">$500</p>
                <div class="btns-container">
                    <button class="btn buy">
                      <span>Buy Now</span>
                        <svg width="15px" height="15px" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" color="#fff"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"></path></svg>
                      </button>
                    <button class="btn add">
                        <span>Add to cart</span>
                        <svg width="15" height="15" viewBox="0 0 25 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M16.5352 16.2109C16.5352 17.1992 15.7422 17.9922 14.7539 17.9922C13.7656 17.9922 12.9648 17.1992 12.9648 16.2109C12.9648 15.2227 13.7695 14.4219 14.7539 14.4219C15.7461 14.4219 16.5352 15.2227 16.5352 16.2109ZM6.61719 14.4219C5.62891 14.4219 4.83594 15.2266 4.83594 16.2109C4.83594 17.1953 5.62891 17.9922 6.61719 17.9922C7.60547 17.9922 8.40625 17.1992 8.40625 16.2109C8.40625 15.2227 7.60547 14.4219 6.61719 14.4219V14.4219ZM18.0117 3.875C6.20703 3.875 3.19922 3.375 0 0C1.34375 2.01953 2.08203 5.81641 14.5742 5.63281C27.5937 5.4375 19.6523 8.99609 17.3398 13.0117C24.6328 6.5 29.8164 3.875 18.0117 3.875V3.875Z" fill="#010101"/>
                        </svg>
                    </button>
                </div>
            </div>
        </div>
</div>

<div class="screen-size">
<div class="large-column">
   <div class="container">
        <div class="shopping-card">
            <div class="img-container">
                <img src="https://images.unsplash.com/photo-1501045661006-fcebe0257c3f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" alt="Product">
            </div>
            <div class="product-info">
                <svg class="see-more" width="14" height="14" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" color="#000"><path d="M0 0h24v24H0z" fill="none"></path><path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"></path></svg>
                <h1>Workshift Chair</h1>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quidem.lorem ipsum</p>
              <p class="more-info">Here's just more information about the product that frankly you don't really need!</p>
                <p class="product-price">$500</p>
                <div class="btns-container">
                    <button class="btn buy">
                      <span>Buy Now</span>
                        <svg width="15px" height="15px" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" color="#fff"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"></path></svg>
                      </button>
                    <button class="btn add">
                        <span>Add to cart</span>
                        <svg width="15" height="15" viewBox="0 0 25 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M16.5352 16.2109C16.5352 17.1992 15.7422 17.9922 14.7539 17.9922C13.7656 17.9922 12.9648 17.1992 12.9648 16.2109C12.9648 15.2227 13.7695 14.4219 14.7539 14.4219C15.7461 14.4219 16.5352 15.2227 16.5352 16.2109ZM6.61719 14.4219C5.62891 14.4219 4.83594 15.2266 4.83594 16.2109C4.83594 17.1953 5.62891 17.9922 6.61719 17.9922C7.60547 17.9922 8.40625 17.1992 8.40625 16.2109C8.40625 15.2227 7.60547 14.4219 6.61719 14.4219V14.4219ZM18.0117 3.875C6.20703 3.875 3.19922 3.375 0 0C1.34375 2.01953 2.08203 5.81641 14.5742 5.63281C27.5937 5.4375 19.6523 8.99609 17.3398 13.0117C24.6328 6.5 29.8164 3.875 18.0117 3.875V3.875Z" fill="#010101"/>
                        </svg>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="medium-column">
   <div class="container">
        <div class="shopping-card">
            <div class="img-container">
                <img src="https://images.unsplash.com/photo-1501045661006-fcebe0257c3f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" alt="Product">
            </div>
            <div class="product-info">
                <svg class="see-more" width="14" height="14" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" color="#000"><path d="M0 0h24v24H0z" fill="none"></path><path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"></path></svg>
                <h1>Workshift Chair</h1>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quidem.lorem ipsum</p>
              <p class="more-info">Here's just more information about the product that frankly you don't really need!</p>
                <p class="product-price">$500</p>
                <div class="btns-container">
                    <button class="btn buy">
                      <span>Buy Now</span>
                        <svg width="15px" height="15px" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" color="#fff"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"></path></svg>
                      </button>
                    <button class="btn add">
                        <span>Add to cart</span>
                        <svg width="15" height="15" viewBox="0 0 25 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M16.5352 16.2109C16.5352 17.1992 15.7422 17.9922 14.7539 17.9922C13.7656 17.9922 12.9648 17.1992 12.9648 16.2109C12.9648 15.2227 13.7695 14.4219 14.7539 14.4219C15.7461 14.4219 16.5352 15.2227 16.5352 16.2109ZM6.61719 14.4219C5.62891 14.4219 4.83594 15.2266 4.83594 16.2109C4.83594 17.1953 5.62891 17.9922 6.61719 17.9922C7.60547 17.9922 8.40625 17.1992 8.40625 16.2109C8.40625 15.2227 7.60547 14.4219 6.61719 14.4219V14.4219ZM18.0117 3.875C6.20703 3.875 3.19922 3.375 0 0C1.34375 2.01953 2.08203 5.81641 14.5742 5.63281C27.5937 5.4375 19.6523 8.99609 17.3398 13.0117C24.6328 6.5 29.8164 3.875 18.0117 3.875V3.875Z" fill="#010101"/>
                        </svg>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
body {
  position:relative;
  font-family: 'Poppins', sans-serif;
  padding: 0;
  margin:0;
}

.desc{
  font-size:1.2em;
  margin-bottom:2em;
}
.screen-size{
  display:flex;
  justify-content:space-around;
}
.large-column{
  z-index:-1;
  box-sizing:border-box;
  padding:1em;
  border:1px solid #010101;
  width:800px;
  height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  place-items:center;
}
.medium-column{
  box-sizing:border-box;
  padding:2em;
  border:1px solid #010101;
  width:400px;
}

.container {
  container: inline-size;
  width: 100%;
  max-width: 750px;
  min-width:150px;
  margin: 0 auto;
}

.shopping-card{
  background:#ffffff;
  width:100%;
  height:100%;
  box-sizing:border-box;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3);
  padding:.5em;
  border-radius: 16px;
  display:flex;
  flex-direction:row;
  justify-content: space-between;
}

.img-container{
  width:100px;
  border-radius:8px;
}
 img{
 border-radius:8px;
 width:100%;
 height:100%;
 object-fit: cover;
 object-position: 50% 50%;
}

 h1{
  margin:0;
  font-weight: 600;
  font-size:.85em;
  text-align:center;
}
    
 p{
  display:none;
  font-weight:300;
  font-size: .75em;
  word-break: break-word;
  color:#b1b3b8;
}
    
p:nth-child(5){
  font-weight:600;
  font-size: 1em;
  color:#fe6e63;
}

.btns-container{
  width:80%;
  display:none;
}
.btn{
    width:44%;
    max-width:180px;
    padding:.95em;
    font-weight:600;
    font-size:.75em;
    border-radius: 4px;
    color:#fff;
    border:none;
}
    
.buy{
    background-color: #17b978;
}
    
.add{
    color:#010101;
}

.btn > span{
   display:none;
}

.more-info {
  display: none;
}

.see-more{
  position:relative;
  left:80%;
}



@container size(min-width:200px){
  .shopping-card{
    flex-direction:column;
    padding:1.5em;
  }
  
  .img-container{
    width:100%;
  }
  
  h1{
    text-align:left;
    font-size:1.2em;
  }
  
  p{
    display:block;
    width:90%;
  }
  
  .btns-container{
    display:block;
  }
  .btn{
    padding:.3em 1.5em;
  }
  .see-more{
    display:none;
  }
}

@container size(min-width: 300px) {
  .btn{
    padding:.75em 1em; 
  }
  
  .btn > span{
    display:block;
  }
  p:nth-child(5){
  font-size: 1.3em;
}
  .btn > svg{
    display:none;
  }
}

@container size(min-width: 500px) {
   .shopping-card{
     flex-direction:row;
  }
  
  h1{
    font-size:1.5em;
  }
  
  .more-info{
    display:block;
  }
  
  .product-info{
    padding-left:1em;
  }
  
  .btns-container{
    width:100%;
    display:flex;
    justify-content:space-around;
  }
  
  .btn{
    padding:.85em 0;
    display:flex;
    justify-content:space-around;
  }
  
  .btn>svg{
    display:block;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.