title: How place elements in <td>?
body: <p>I have Products which has images in maximum 100px size. It means: width is 100px, height is small than 100px, or height is 100px, width is small than 100px. One side is always 100px.</p>
  
  <p>I need to show product image on the <strong>right</strong>, name and price on the <strong>bottom left</strong> of that image. it is structure in different cases what I need:</p>
  
  <p><img src="https://i.stack.imgur.com/5iKGX.png" alt="enter image description here"></p>
  
  <p>I tried this: </p>
  
  <pre><code>&lt;table style="width: 100%;"&gt;
      &lt;tbody&gt;
          &lt;tr&gt;
            &lt;td style="height: 100px; "&gt;
                &lt;a href="@Url.Action("Details", "Product", new { id = Model.Id })" &gt; 
                   &lt;img src="@Url.Content("~/Images/" + Model.Image)" style="float:right;" alt="" /&gt;
                  &lt;b style="margin-top: 15%; float: right;"&gt;
                      &lt;label&gt;@Model.Price&lt;/label&gt;
                      &lt;br /&gt;
                      &lt;label&gt;@Model.Name&lt;/label&gt;
                  &lt;/b&gt;
                &lt;/a&gt;
            &lt;/td&gt;
         &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>But this work only for 100px height. <code>margin-top: 15%;</code> is static. When image height is 50px, 60px etc.. it should change.
  How can I do this? its not important to use a table. You can advice any elements to do this.</p>
  
  <p><strong>EDIT:</strong>
  I added one more <code>&lt;td&gt;</code> side by side and put price and name into first <code>&lt;td&gt;</code> and image into second <code>&lt;td&gt;</code>.</p>
  
  <p>Now I need to set <code>&lt;td&gt;</code> width like inner element's size. If image width in <code>&lt;td&gt;</code> is 90px, to set <code>&lt;td&gt;</code> width to 90px. Is it possible?</p>