Adding Thumbnail Image With CSS Border

Question

I'm attempting to replicate Lynda.com's course listing thumbnail graphic (see here). I'm not sure how to insert the image into this section of my already working code. What I'm unsure about are the specifications for the image's proportions each time, as well as how to handle image resizing if my description is particularly lengthy and extends the border. Where should I start?

If things go bad, I'll keep the descriptions brief. I also understand that increasing the size of the image as a result of increasing the description's length will make it appear inconsistent with the other thumbnail photos on the page.

HTML:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"

<a class="course_list_link" href=""> 
<p class = "course_list_border"> 
  <strong> Title </strong> <br/> <br/>    
  description <br/> <br/>  
  skill_level  &emsp; 
  date &emsp; 
  Views: views &emsp; 
subject </p> </a>

CSS:

.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;
}