JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">

<ul class="listBox">

  <li><div><p>Course ID: COMP108<br/>Course Name: Computer_Science_Industrial<br/>_Experience_Reflective_Learning_I<br/>Credits: 3<br/>Pre-Requisite: NONE<br/>Co-Requisite: NONE</p>
    <i class="fas fa-arrow-right fa-2x"></i></div></li>

  <li><div><p>Course ID: COMP201<br/>Course Name: Computer_Science_Industrial<br/>_Experience_Reflective_Learning_II<br/>Credits: 3<br/>Pre-Requisite: MATH201<br/>Co-Requisite: NONE</p><i class="fas fa-arrow-right fa-2x"></i></div></li>

  <li><div><p>Course ID: COMP248<br/>Course Name: Object-Oriented_<br/>Programming_I<br/>Credits: 3<br/>Pre-Requisite: MATH204<br/>Co-Requisite: COMP201</p></div></li>

</ul>

CSS

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.listBox{
  width: 100%;
}

.listBox:after{
  content: '';
  display: table;
  clear: both;
}

.listBox li {
  position: relative;
  float: left;
  width: 33.3333%;
  list-style: none;
  padding: 8px 16px;
}

.listBox li div {
  background-color: #999;
  border-radius: 15px;
  width: 100%;
  display: flex;
  align-items: center;
}

.listBox p{
  padding: 8px;
  font-size: 11px;
  font-family: Courier;
}

i {
  position: absolute;
  right: -14px;
}