JSFiddle - React, Tailwind, and code Playground

by n2learning

HTML

<div id="routineframe">
  <ul id="routinefilter">
    <li  class='routine' data-id="15">
      <div class='routineImage'><img src=http://img.youtube.com/vi/UheCchftswc/2.jpg></div>
      <div class='routineID'>16</div>
      <div class='routineTime'>01:04</div>
      <div class='routineDesc'>Use lighter weights on a barbell due to higher counts</div>
    </li>
  </ul>
  <ul id="routinefilter">
    <li  class='routine' data-id="15">
      <div class='routineImage'><img src=http://img.youtube.com/vi/9inwrDOcTSg/3.jpg></div>
      <div class='routineID'>07</div>
      <div class='routineTime'>12:13</div>
      <div class='routineDesc'>Try to keep up with Denise Austin through this fast paced cardio workout</div>
    </li>
  </ul>
</div>

<p>How do I do the following?</p> 
<p>1) Move the time box (i.e '01:04' and '12:13') so it floats to the right top edge of the image? 
<p>2) Move the description of the workout to display to the right of the image beneath the time box and the routineID?
<p>3) Allow the bottom border of class 'routine' to always be right beneath the image just like it is to the top of the image.
<p>4) keep class 'routine' the same size even if more text in description is added. I want every 'routine' to have the same width and height dimensions.

CSS

#routineframe {
    height: 400px;
    border: dashed;
    font-family: Arial,helvetica,sans-serif;
    cursor: pointer;
    width: 60%;
    overflow: auto;
}

#routinefilter {
    list-style: none;
   
}
.routine{
    background: #F4F4F4;
    color: #41383C; 
    font-size: 18px;
    border:2px solid #666;
    margin:5px;
    padding:5px;
    width: 95%;
}

.routine .routineImage{
    position: relative
    float: left;
    display: inline;
    margin-left: auto;
    margin-right: auto;
}

.routine .routineTime{
    position: relative;
    top: 0;
    float: right;
    margin-left: auto;
    margin-right: 3px;
    border: 1px solid #666;
    background: white;
    color: navy;
    
}

.routine .routineID{
    top: 0;
    float: right;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid #666;
    background: white;
}

.routine .routineDesc{
   top: 0;
   margin-left: auto;
   margin-right: auto; 
   font-size: 16px; 
}