Responsive Preview Card using React, MUI and Typescript

Hello there 👋. Good job on completing the challenge !

I have a different suggestion.

• The best way to create two columns in CSS is to use the grid layout 📐. Using the grid layout, you can create two columns by setting the display property of the parent element to grid and then defining the number of columns you want with the grid-template-columns property.

  Example:

  <div class="container">
    <div>Column 1</div>
    <div>Column 2</div>
  </div>
  
  .container {
    max-width: 40rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr) /*  Creates two columns with equal width  */
  }
  

  With Flexbox Layout, you need to set the width of each div to 50% so that they will occupy equal amounts of space in the container.

   <div class="container">
     <div  class="column">Column 1</div>
     <div class="column">Column 2</div>
   </div>
   
   .container {
     max-width: 40rem;
     display: flex;
   }
  
   .column {
       width: 50%;
   }
  

Happy coding!

Nice work @Gaurav4604!

Using a grid will be overkill, as flexbox will do just right for the implementation. Generally speaking, a grid will be more suited for an overall page layout than trying to align elements in a component like a card example.

Overall, you did a nice job with your implementation.