title: How to convert this structure to flex-box?
body: <p>The current design based on tables looks like this (the pictures are of the different size and ratio; the goal is to make all the imgs and text fit on same line and resize pictures preserving the ratio):</p>
  
  <pre><code>&lt;style&gt;
      table td, table td *
      {
          vertical-align: top;
      }
      img
      {
          display: block;
          max-width: 100%;
          max-height: 100%;
          width: auto;
          height: auto;
      }
  &lt;/style&gt;
  &lt;table style="width: 100%;"&gt;
      &lt;tr&gt;
          &lt;td&gt;
              &lt;table&gt;
                  &lt;tr&gt;
                      &lt;td&gt;
                          &lt;img src="Pics/m51_1.jpg" /&gt;
                      &lt;/td&gt;
                      &lt;td&gt;
                          text text text text text text text text text text text text text text text text 
                      &lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/table&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;table&gt;
                  &lt;tr&gt;
                      &lt;td&gt;
                          &lt;img src="Pics/hubble.jpg" /&gt;
                      &lt;/td&gt;
                      &lt;td&gt;
                          text text text text text text text text text text text text text text text text 
                      &lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/table&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>And my straightforward attempt to convert it to flex-box design is the following:</p>
  
  <pre><code>&lt;style&gt;
      div
      {
          max-width: 100%;
          display: flex;
          flex-direction: row;
          flex-wrap: nowrap;
      }
      img
      {
          display: block;
          max-width: 100%;
          max-height: 100%;
          width: auto;
          height: auto;
      }
  &lt;/style&gt;
  &lt;div style="width: 100%;"&gt;
      &lt;div&gt;
          &lt;img src="Pics/m51_1.jpg" /&gt;
          text text text text text text text text text text text text text text text text 
      &lt;/div&gt;
      &lt;div&gt;
          &lt;img src="Pics/hubble.jpg" /&gt;
          text text text text text text text text text text text text text text text text 
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Unfortunately, it doesn't work properly in all the major browsers (different bugs in Chrome, FF and Edge). Any ideas how to make it work?</p>