JSFiddle - React, Tailwind, and code Playground

by Walter Rumsby

HTML

<ul>
    <li class="task">
        <div class="line">
            <span class="task-date">Date Created</span>
            <span class="task-title">Task Title</span>
        </div>
        <div class="line">
            <span class="task-due-date overdue">Date Overdue</span>
            <span class="patient-name">Patient Name</span>
        </div>
    </li>
</ul>

CSS

.task {
    border: 1px solid red;
    min-height: 3em;
    width: 200px;
    padding: 0px;
}

.patient-name {
   font-weight: bold;
}

.task .task-date {
   float: right;
}

.line .task-due-date {
   float: right;
}

.task .overdue {
   color: red;
}