JSFiddle - React, Tailwind, and code Playground

by mehulkar

HTML

<div class="grid">
  <div class="logo">
    <picture class="we-artwork we-artwork--downloaded we-artwork--round podcast-channel__logo-artwork" style="--background-color: #70430a;" id="ember29">
            <source class="we-artwork__source" srcset="https://isq11.mzstatic.com/image/thumb/PodcastSource123/v4/1a/f3/76/1af37632-cd38-5f51-a608-38aef9d8c08d/7e20757f-f805-4fc9-8477-84aafe4e43e5.png/176x176sr.webp 1x, https://isq11.mzstatic.com/image/thumb/PodcastSource123/v4/1a/f3/76/1af37632-cd38-5f51-a608-38aef9d8c08d/7e20757f-f805-4fc9-8477-84aafe4e43e5.png/352x352sr.webp 2x" type="image/webp">

          <img class="we-artwork__image ember29" src="/assets/artwork/1x1-42817eea7ade52607a760cbee00d1495.gif" decoding="async" alt="" height="176" width="176">
      

</picture>
  </div>
  <div class="desc">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eros tortor, sodales et semper id, porta scelerisque libero. Integer ornare diam eros, ut pharetra erat ullamcorper sit amet. Nam in efficitur erat, eu auctor nunc. Praesent porttitor ut nulla a sagittis. Pellentesque feugiat posuere semper. Sed odio nunc, posuere dignissim ipsum sit amet, faucibus consectetur urna. Donec porta ligula at felis rutrum, nec pulvinar orci accumsan. Praesent fringilla risus eros, et efficitur tortor iaculis nec. Aenean ornare diam nec lobortis fermentum.

Vivamus in urna ut sapien posuere condimentum in et massa. Phasellus sed arcu tincidunt, gravida ligula ac, bibendum arcu. In blandit iaculis velit, at porttitor tortor interdum vel. Etiam dignissim lacus lacus, id maximus arcu fringilla eu. Praesent blandit finibus leo, vitae blandit metus varius ut. In porta nibh vitae lectus scelerisque sollicitudin eu et mi. Nunc facilisis mauris nec ligula blandit, sit amet gravida ante elementum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed ut aliquam augue. In viverra, risus ac laoreet sodales, eros eros ornare nisl, at pulvinar nunc est...

CSS

.grid {
    display:grid;
    grid-template-columns: min-content minmax(auto, 385px);
    grid-template-rows: 1fr auto 1fr;
    grid-column-gap: 40px;
    justify-content: center;
}

.logo, .desc {
  grid-row-start: 2;
}

.logo {
  /* place-self: center; */
}