JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrap">
  <div id="main" class="clearfix">
    
    <ul class="ranklist" id = "ranklist">
      <li class="ranklistitem font-size-0">
        <div class="itemnumber divinline"> <span class="helper"></span>1</div>
        <div class="userprofile divinline"><img class="profileimg" src=""/></div>
        <div class="nameandcredit divinline">
          <div class="username">SteveSteveSteveSteveSteveSteveSteveSteveSteveSteveSteveSteveSteveSteveSteve</div>
          <div class="credit">I'm description</div>
        </div>
        <div class="ranktitle divinline">Total:</div>
        <div class="usercredit divinline">1000</div>
      </li>
      </ul>
    </div>
</div>

CSS

* {
	margin: 0;
	padding: 0;
}
html, body {
	height: 100%;
}
html {
	background: #aaaaaa;	
}

body {
	-webkit-user-select: none; /* Chrome/Safari */
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* IE10+ */
	font-family: "PingHei", "Helvetica Neue", "Helvetica", Arial, "Microsoft YaHei";
	font-weight: lighter;
}
#wrap {
	min-height: 100%;
}
#main {
	overflow-y: auto;
	padding-bottom: 55px;
}

div, ul, p {
	padding: 0px;
	margin: 0px;
	color: #ffd8d0;
}

.rewarddes
{
	margin-top:10px;
	display:block;
	color:#ffdcc5;
	overflow:hidden;
	font-size:87.5%;
}
.ranklistitem {
	height: 60px;
	border-bottom: solid 1px #faa559;
	font-size:87.5%;
}
.font-size-0 {
    font-size: 0;
}
.font-size-0>div {
    font-size: 12px;
    box-sizing: border-box;
}
.divinline {
	display: inline-block;
	vertical-align: top;
	padding: 0px;
	margin: 0px;
}
.helper {
	display: inline-block;
	height: 100%;
	vertical-align: middle;
}
.itemnumber {
	line-height: 60px;
	height: 60px;
    background:#aa8800;
	width: 6%;
	text-align: right;
	padding-right: 5px;
}
.userprofile {
	line-height: 60px;
	height: 60px;
	width: 14%;
	text-align: center;
	vertical-align: middle;
    background:#228845;
}
.profileimg {
	height: 36px;
	width: 36px;
	vertical-align: middle;
	border-top-left-radius: 50%;
	border-top-right-radius: 50%;
	border-bottom-left-radius: 50%;
	border-bottom-right-radius: 50%;
	border: solid 2px #fff;
}
.nameandcredit {
	height: 60px;
	width: 45%;
	padding-left: 5px;
    background:#342389
}
.username {
	height: 55%;
	text-align: left;
	vertical-align:bottom;
	overflow:hidden;
    word-wrap:break-word;
}
.credit {
	height: 25%;
	font-size: 66.7%;
	text-align: left;
	overflow:hidden;
	color:#fdff6e;
}

.username:before, .credit:after {
    content:'';
    height:100%;
    vertical-align:middle;
    display:inline-block;
}

.iconaward {
	vertical-align: middle;
	height: 20px;
	width: 14px;
}
.ranktitle {
	line-height: 60px;
	height: 60px;
	width: 15%;
   ...