JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
  <table>
    <tr>        
        <td class="arrow"><img src="./img/circle_arrow_right.png" class="arrowimage"></td>
        <td class="numbers">1.</td>
        <td class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce non lacus scelerisque dui eleifend viverra. Vestibulum venenatis ornare pulvinar.</td>
    </tr>
    <tr>
        <td class="arrow">&nbsp;</td>
        <td class="numbers">2.</td>
        <td class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce non lacus scelerisque dui eleifend viverra. Vestibulum venenatis ornare pulvinar. Mauris euismod sem ornare nisi consequat quis tincidunt turpis tempor. Vivamus mollis luctus nulla sit amet consequat.</td>
    </tr>
 </table>
</div>

CSS

.wrapper {
    margin-bottom: 1.5em;    
    border: 1px solid #ddd;
    border-radius: 4px;
}

.wrapper table{
    width:100%;
    border-collapse:collapse;
}

.wrapper table td {
    border:1px solid #ddd;
}

.wrapper table tr:first-child td{
    border-top:none;
}

.wrapper table tr:last-child td{
    border-bottom:none;
}

.wrapper table tr td:last-child{
    border-right:none;
}

.wrapper table tr td:first-child{
    border-left:none;
}


.arrow {    
    border-right: 1px solid #ddd;
    width:40px;
    text-align:center;
    padding-top:5px;
}

.arrowimage {
    width: 16px;
    height: 16px;
}

.text {    
    border-left: 1px solid #ddd;
    width:585px;
    padding-left:5px;    
}

.numbers {    
    border-left: 1px solid #ddd;
    width:30px;
    text-align:center;
}