JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    <div class="box1row box1top">
        <div class="arrow"><img src="./img/circle_arrow_right.png" class="arrowimage"></div>
        <div class="numbers">1.</div>
        <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce non lacus scelerisque dui eleifend viverra. Vestibulum venenatis ornare pulvinar.</div>
    </div>
    <div class="box1row box1bottom">
        <div class="arrow">&nbsp;</div>
        <div class="numbers">2.</div>
        <div 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.</div>
    </div>
</div>

CSS

.wrapper {
    margin-bottom: 1.5em;
}
.arrow {
    display: table-cell;
    width:40px;
    text-align:center;
    padding-top:5px;
}
.arrowimage {
    width: 16px;
    height: 16px;
}
.text {
    display: table-cell;
    border-left: 1px solid #ddd;
    width:585px;
    padding-left:5px;
    margin-left: -1px;
}
.numbers {
    display: table-cell;
    border-left: 1px solid #ddd;
    width:30px;
    text-align:center;
    margin-left: -1px;
}
.box1row {
    border: 1px solid #ddd;
    margin-bottom: -1px;
    display: table;
}

.box1top {
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
}

.box1bottom {
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
}