JSFiddle - React, Tailwind, and code Playground

by Kikketer

HTML

<div class="wg-ac-card" data-radium="true" style="margin: 10px; background-color: white; border-radius: 4px; box-shadow: rgba(143, 143, 143, 0.5) 0px 0px 5px 0px; width: 400px">
  <div class="wg-ac-container wg-ac-container-with-actions" style="display: flex; flex-direction: column; position: relative; background-color: rgb(255, 255, 255); border-radius: 3px; box-sizing: border-box; flex: 0 1 auto; padding: 20px;">
    <div class="wg-ac-container" style="display: flex; flex-direction: column; position: relative; background-color: rgb(255, 255, 255); box-sizing: border-box; flex: 0 1 auto;">
      <div style="overflow: hidden; font-family: sans-serif; text-align: left; font-size: 14px; line-height: 18.2px; color: rgb(27, 27, 27); font-weight: 600; white-space: nowrap; box-sizing: border-box; flex: 0 1 auto;">
        <div class="paragraph" style="margin-top: 0px; width: 100%; overflow: hidden; text-overflow: ellipsis; margin-bottom: 0px;">Approval: Department Change</div>
      </div>
      <div class="undefined" style="height: 8px; overflow: hidden; flex: 0 0 auto;"></div>
      <!--div class="body" -->
        <div class="wg-ac-columnSet" style="display: flex; justify-content: flex-start; box-sizing: border-box; flex: 0 1 auto; background-color: orange; flex-direction: row; min-height: 1px;">
          <div class="wg-ac-container" style="display: flex; flex-direction: column; position: relative; box-sizing: border-box; min-width: 0px; flex: 1 1 75%;">
            <div style="overflow: hidden; font-family: sans-serif; text-align: left; font-size: 12px; line-height: 15.6px; color: rgb(27, 27, 27); font-weight: 400; word-wrap: break-word; max-height: 46.8px; box-sizing: border-box; flex: 0 1 auto;">
              <div class="paragraph" style="margin-top: 0px; width: 100%; margin-bottom: 0px;">:flag: Department change request happened <strong>7 months ago</strong> for Brandon Kerry to department 01234.</div>
            </div>
          </div>
          <div...

CSS

.wrapper {
  display: flex;
  flex-direction: column;
  border: 1px solid black;
  width: 400px;
}

.head {
  background-color: rgba(200, 100, 100, 1);
}

.body {
  min-height: 1px; /* NEW (for IE11) */
  background-color: rgba(200, 200, 200, 1);
}

.inner {
  display: flex;
  flex-direction: row;
}

.inner-content {
  flex: 1 1 75%;
}

.inner-image {
  flex: 1 1 25%;
}

.inner-image img {
  border-radius: 50%;
  max-width: 100%;
  flex-shrink: 0;
}

.foot {
  background-color: rgba(100, 200, 100, 1);
}