title: Adding Thumbnail Image With CSS Border
body: <p>I am trying to recreate what Lynda.com does with their course listing thumbnail image (see <a href="https://www.lynda.com/Developer-training-tutorials/50-0.html" rel="nofollow noreferrer">here</a>). I am not sure how to place the image inside of my already existing code <a href="https://jsbin.com/goteweqiso/1/edit?html,css,output" rel="nofollow noreferrer">here</a>. What I am not sure of is the dimensions of what the image should be each time and I am not sure how to handle the image resizing if my description is really long and widens the border. How would I do this?</p>
  
  <p>If worse comes to worse, I will keep the descriptions small. I also realize that if the image also gets bigger if the description gets longer, the image getting bigger as a side effect will not look consistent with the other thumbnail images on the page.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
  
  &lt;a class="course_list_link" href=""&gt; 
  &lt;p class = "course_list_border"&gt; 
    &lt;strong&gt; Title &lt;/strong&gt; &lt;br/&gt; &lt;br/&gt;    
    description &lt;br/&gt; &lt;br/&gt;  
    skill_level  &amp;emsp; 
    date &amp;emsp; 
    Views: views &amp;emsp; 
  subject &lt;/p&gt; &lt;/a&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.course_list_border{
      border-style: solid;
      border-width: 1px;
      border-color: #DCDCDC;
      padding: 10px;
      word-wrap: break-word;
  }
  
  .course_list_border:hover{
      background-color: #F8F8F8;
      cursor: pointer;
  }
  
  .course_list_link{
      color: black;
  }
  
  .course_list_link:hover{
      text-decoration: none;
      color: black;
  }
  
  body {
      min-height: 400px;
      margin-bottom: 100px;
      margin-top: 0%;
      clear: both;
      padding-top: 55px;
      font-family: 'Roboto', sans-serif;
      font-size: 16.5px;
  }
  </code></pre>