title: Flex container with 3 columns: image on left side, content after image centered & entrire container clickable
body: <p>I need a flex container with 3 columns (9 items in total) for PC devices, entire container must be clickable. The container have image on left side and text on right side.</p>
  <p>For mobile devices &gt; CSS <code>@media</code> till 800px to be one column.
  The challenge is the latest 4 containers to have a different class or ID at containers because I want to display only 5 containers for mobile devices (hide that class to devices till 800px with display:none).</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.myflex-container {
    display: flex;
    flex-direction: row;
    font-size: 20px;
    text-align: center;
  }
  
  .myflex-item-left,
  .myflex-item-right {
    flex: 50%;
    margin: 10px;
  }
  
  img.imgoxauto {
    height: 100%;
    width: 74px;
  }
  
  .myprod-image {
    height: 74px;
    margin-right: 10px;
  }
  
  .myflex-item-left&gt;a,
  .myflex-item-right&gt;a {
    display: flex;
  }
  
  .clickable-card {
    background-color: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    margin-bottom: 10px;
  }
  
  .myflex-item-left&gt;a,
  .myflex-item-right&gt;a {
    display: flex;
    align-items: center;
  }
  
  h5.texth5.myprod-name {
    padding-bottom: 0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="myflex-container"&gt;
    &lt;div class="myflex-item-left"&gt;
      &lt;a href="https://www.example.com/abc" class="clickable-card"&gt;
        &lt;div class="myprod-image"&gt;
          &lt;img class="imgoxauto" src="https://i.imgur.com/GmtzHkT.jpg" alt="London" /&gt;
        &lt;/div&gt;
        &lt;div class="myprod-description"&gt;
          &lt;h5 class="texth5 myprod-name"&gt;London&lt;/h5&gt;
        &lt;/div&gt;
      &lt;/a&gt;
      &lt;a href="https://www.example.com/abc" class="clickable-card"&gt;
        &lt;div class="myprod-image"&gt;
          &lt;img class="imgoxauto" src="https://i.imgur.com/jPGPiJN.jpg" alt="London" /&gt;
        &lt;/div&gt;
        &lt;div class="myprod-description"&gt;
          &lt;h5 class="texth5 myprod-name"&gt;Paris&lt;/h5&gt;
        &lt;/div&gt;
      &lt;/a&gt;
      &lt;a href="https://www.example.com/abc" class="clickable-card"&gt;
        &lt;div class="myprod-image"&gt;
          &lt;img class="imgoxauto" src="https://i.imgur.com/HYZ1Ci5.jpg" alt="London" /&gt;
        &lt;/div&gt;
        &lt;div class="myprod-description"&gt;
          &lt;h5 class="texth5 myprod-name"&gt;Frankfurt&lt;/h5&gt;
        &lt;/div&gt;
      &lt;/a&gt;
    &lt;/div&gt;
  
    &lt;div class="myflex-item-right"&gt;
      &lt;a href="https://www.example.com/xyz" class="clickable-card"&gt;
        &lt;div class="myprod-image"&gt;
          &lt;img class="imgoxauto" src="https://i.imgur.com/GmtzHkT.jpg" alt="Chicago" /&gt;
        &lt;/div&gt;
        &lt;div class="myprod-description"&gt;
          &lt;h5 class="texth5 myprod-name"&gt;Chicago&lt;/h5&gt;
        &lt;/div&gt;
      &lt;/a&gt;
      &lt;a href="https://www.example.com/xyz" class="clickable-card"&gt;
        &lt;div class="myprod-image"&gt;
          &lt;img class="imgoxauto" src="https://i.imgur.com/0MAl65z.jpg" alt="Chicago" /&gt;
        &lt;/div&gt;
        &lt;div class="myprod-description"&gt;
          &lt;h5 class="texth5 myprod-name"&gt;New York&lt;/h5&gt;
        &lt;/div&gt;
      &lt;/a&gt;
      &lt;a href="https://www.example.com/xyz" class="clickable-card"&gt;
        &lt;div class="myprod-image"&gt;
          &lt;img class="imgoxauto" src="https://i.imgur.com/GLLQ3VQ.jpg" alt="Chicago" /&gt;
        &lt;/div&gt;
        &lt;div class="myprod-description"&gt;
          &lt;h5 class="texth5 myprod-name"&gt;Geneva&lt;/h5&gt;
        &lt;/div&gt;
      &lt;/a&gt;
      &lt;a href="https://www.example.com/xyz" class="clickable-card"&gt;
        &lt;div class="myprod-image"&gt;
          &lt;img class="imgoxauto" src="https://i.imgur.com/GmtzHkT.jpg" alt="Chicago" /&gt;
        &lt;/div&gt;
        &lt;div class="myprod-description"&gt;
          &lt;h5 class="texth5 myprod-name"&gt;Chicago&lt;/h5&gt;
        &lt;/div&gt;
      &lt;/a&gt;
      &lt;a href="https://www.example.com/xyz" class="clickable-card"&gt;
        &lt;div class="myprod-image"&gt;
          &lt;img class="imgoxauto" src="https://i.imgur.com/0MAl65z.jpg" alt="Chicago" /&gt;
        &lt;/div&gt;
        &lt;div class="myprod-description"&gt;
          &lt;h5 class="texth5 myprod-name"&gt;New York&lt;/h5&gt;
        &lt;/div&gt;
      &lt;/a&gt;
      &lt;a href="https://www.example.com/xyz" class="clickable-card"&gt;
        &lt;div class="myprod-image"&gt;
          &lt;img class="imgoxauto" src="https://i.imgur.com/GLLQ3VQ.jpg" alt="Chicago" /&gt;
        &lt;/div&gt;
        &lt;div class="myprod-description"&gt;
          &lt;h5 class="texth5 myprod-name"&gt;Geneva&lt;/h5&gt;
        &lt;/div&gt;
      &lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>