title: How to display an image next to some texts
body: <p>I am trying to achieve the following:</p>
  
  <p><img src="https://i.stack.imgur.com/NEh0b.png" alt="enter image description here"></p>
  
  <p>The DIVS are divided in three section and once reaching a certain screen size, I want them to stack on top of another using Media Queries.</p>
  
  <p>Here is the HTML (disregard inline CSS, i will be moving it to a file once I have it working):</p>
  
  <pre><code>&lt;div class="col span_1_of_3" style="height: 150px;"&gt;
      &lt;div class="test2n" style="height: 100%;"&gt;
          &lt;div style="float: left; displat: inline-block; width: 28% padding-right: 2%; height: 100%;"&gt;&lt;img id="NewsArticle_2790_image" class="imgArtThumb" title="The Com" alt="The Com" src="tOne.png?n=5350" /&gt;&lt;/div&gt;
          &lt;div style="float: left; display: inline-block; width: 58%; height: 100%;"&gt;
              &lt;div style="width: 100%; height: 48%; padding-bottom: 2%; text-align: left;"&gt;&lt;a href="/template.aspx?id=2790"&gt;How we can better develop&lt;/a&gt;&lt;/div&gt;
              &lt;div style="width: 100%; height: 48%; overflow: hidden; text-overflow: ellipses; white-space: nowrap; text-align: left"&gt;TThis DIV will have a long text but anything that doesn't fit the set dimension will end with a "..."&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="col span_1_of_3" style="height: 150px;"&gt;
      &lt;div class="test2n" style="height: 100%;"&gt;
          &lt;div style="float: left; displat: inline-block; width: 28% padding-right: 2%; height: 100%;"&gt;&lt;img id="NewsArticle_2790_image" class="imgArtThumb" title="The Com" alt="The Com" src="tOne.png?n=5350" /&gt;&lt;/div&gt;
          &lt;div style="float: left; display: inline-block; width: 58%; height: 100%;"&gt;
              &lt;div style="width: 100%; height: 48%; padding-bottom: 2%; text-align: left;"&gt;&lt;a href="/template.aspx?id=2790"&gt;How we can better develop&lt;/a&gt;&lt;/div&gt;
              &lt;div style="width: 100%; height: 48%; overflow: hidden; text-overflow: ellipses; white-space: nowrap; text-align: left"&gt;TThis DIV will have a long text but anything that doesn't fit the set dimension will end with a "..."&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="col span_1_of_3" style="height: 150px;"&gt;
      &lt;div class="test2n" style="height: 100%;"&gt;
          &lt;div style="float: left; displat: inline-block; width: 28% padding-right: 2%; height: 100%;"&gt;&lt;img id="NewsArticle_2790_image" class="imgArtThumb" title="The Com" alt="The Com" src="tOne.png?n=5350" /&gt;&lt;/div&gt;
          &lt;div style="float: left; display: inline-block; width: 58%; height: 100%;"&gt;
              &lt;div style="width: 100%; height: 48%; padding-bottom: 2%; text-align: left;"&gt;&lt;a href="/template.aspx?id=2790"&gt;How we can better develop&lt;/a&gt;&lt;/div&gt;
              &lt;div style="width: 100%; height: 48%; overflow: hidden; text-overflow: ellipses; white-space: nowrap; text-align: left"&gt;TThis DIV will have a long text but anything that doesn't fit the set dimension will end with a "..."&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.imgArtThumb
  {
      width: 155px;
      height: 100px;
  }
  .test2n
  {
      text-align: left;
      box-shadow: inset 0 -1px 1px rgba(0,0,0,0.5), inset 0 1px 1px rgba(238,146,85,1);
  }
  .test2 p, .test2n p
  {
      text-align: left;
  }
  /*  COLUMN SETUP  */
  .col {
      display: block;
      /*float:left;*/
      display: inline-block;
      margin: 1% 0 1% 0;
  }
  .col:first-child {
      margin-left: 0;
  }
  .span_1_of_3 {
      width: 32.2%;
  }
  @media only screen and (max-width: 825px) {
      .col { 
          margin: 1% 0 1% 0%;
      }
  }
  
  @media only screen and (max-width: 825px) {
      .span_3_of_3 {
          width: 100%; 
      }
      .span_2_of_3 {
          width: 100%; 
      }
      .span_1_of_3 {
          width: 98%;
      }
  }
  </code></pre>
  
  <p>Here is the JSFiddle: <s><a href="http://jsfiddle.net/ofrj55j4/1/" rel="nofollow noreferrer">http://jsfiddle.net/ofrj55j4/1/</a></s></p>
  
  <p>Updated JSFiddle with <code>max-width</code> set to <code>90%</code>: <a href="http://jsfiddle.net/ofrj55j4/6/" rel="nofollow noreferrer">http://jsfiddle.net/ofrj55j4/6/</a></p>
  
  <p>How to I make it so that the image is centered on the left vertically and the top right title link should take up 50% and the description on bottom right take up 50%. For the description I would like to have the ellipses if it exceeds the dimension.</p>
  
  <p>UPDATE: I got everything working except the ellipses. Why doesn't fill out the entire DIV before using the ellipses? JSFiddle: <a href="http://jsfiddle.net/ofrj55j4/19/" rel="nofollow noreferrer">http://jsfiddle.net/ofrj55j4/19/</a></p>