title: Align card text next to image
body: <p>I've dived last weeks a bit more into react.js with Gatsby and Prismic. I've created blog cards which I display using flex: wrap (Check the image) , now I want to display my blog cards horizontal.</p>
  
  <p><img src="https://i.stack.imgur.com/gxem0.png" alt="Attached Image"></p>
  
  <p>If I do nowrap:</p>
  
  <p><img src="https://i.stack.imgur.com/L47fo.png" alt="Attached Image"></p>
  
  <p>MY CODE:</p>
  
  <p>Cardlist.js:</p>
  
  <pre><code>&lt;React.Fragment&gt;
    &lt;div className="cardslist"&gt;{children}&lt;/div&gt;
  
    {/* --- STYLES --- */}
    &lt;style jsx&gt;{`
      .cardslist {
        text-align: center;
  
      }
  
      @from-width desktop {
        .cardslist {
          display: flex;
          flex-wrap: wrap
        }
      }
    `}&lt;/style&gt;
  &lt;/React.Fragment&gt;
  </code></pre>