Card

by Renan Ribeiro Brando

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">

<div class="row">
  <div class="column left">
    <h2><i class='fas fa-chart-line fa-1x'></i></h2>
  </div>
  <div class="column right">
    <h2>10,015ms</h2>
    <p>Inspection: POST S3</p>
    <p>Reference: Month Sep/2018</p>
  </div>
</div>

CSS

* {
    box-sizing: border-box;
}

/* Create two unequal columns that floats next to each other */
.column {
    float: left;
    height: 120px; /* Should be removed. Only for demonstration */
    width: 150px;
}

.left {
  padding: 10px;
  padding-top:50px;
  width: 50px;
  border-radius: 16px 0 0 16px;
  color: #1976D2;
  background-color: #333;
}

.right {
  padding: 5px;
  width: 150px;
  border-radius: 0 16px 16px 0px;
  font-family: "Arial", Times, serif;
  color: #FFF !important;
  background-color: #333;
}

.right h2 {
  margin-bottom: 8px;
  font-size: 28px;
}

.right p {
  margin: 0px;
  font-size: 12px;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}