JSFiddle - React, Tailwind, and code Playground

HTML

<div class="jC2_Container">

    <div class="jC2_EventWrapper">
        <div class="jC2_EventNum">1</div>
        <div class="jC2_EventObject">System</div>
        <div class="jC2_Break"></div>
        <div class="jC2_EventDescription">Every tick</div>
    </div>

</div>

CSS

.jC2_Container{

}
.jC2_EventWrapper
{
    border-right:1px solid #CDC3FF;
    height:20px;
    width:250px;
}
.jC2_EventNum
{
    float:left;
    font-family: Arial, verdana;
    text-align:center;
    font-size:12px;
    background-color: #ffffff;
    color:#c0c0c0;
    width:20px;
    height:20px;
    line-height:20px;
}
.jC2_EventObject
{
    font-family: Arial, verdana;
    font-size:12px;
    background-color:#F3F1FF;
    padding-left:30px;
    float:left;
    height:20px;
    line-height:20px;
    border-left:5px solid #CDC3FF;
    border-top:1px solid #CDC3FF;
    padding-right:20px;
}
.jC2_Break{
    width: 1px;
    height: 16px;
    background-color:#CDC3FF;
    float:left;
}
.jC2_EventDescription{
    float:left;
    font-family: Arial, verdana;
    font-size:12px;
    border-top:1px solid #CDC3FF;
    line-height:20px;
    padding-left:20px;
    display:inline-block;
}