JSFiddle - React, Tailwind, and code Playground

by korimako

HTML

<div id='listBox'>
    
    <div class='row'>
        <div class='acctName'>somename</div>
        <div class='acctEmail'>[email protected]<br/>blash</div>
        <div class='acctClose'>x</div>
    </div>
    
    <div class='row'>
        <div class='acctName'>somename2</div>
        <div class='acctEmail'>[email protected]</div>
        <div class='acctClose'>x</div>
    </div>

    <div class='row'>
        <div class='acctName'>somelongername</div>
        <div class='acctEmail'>[email protected]</div>
        <div class='acctClose'>x</div>
    </div>    
</div>

CSS

#listBox {
    width:300px;
    border: 1px solid #CCC;%;
    display:table;
    overflow:hidden;
}

.row {
    width:100%;
    position:relative;
    display:block;
    border-bottom: 1px solid #ccc;
}

.acctName, .acctEmail, .acctClose {
  display:table-cell;
    word-break:break-all;
    padding:0.2em 1em;
    border: 1px solid #CCC;
}

.acctName {
    min-width: 5em;
}

.acctClose {
       
}