JSFiddle - React, Tailwind, and code Playground

HTML

<div class="row">
    <div class="name"><h3>Some long name in here</h3></div>
    <div class="info">
        <div class="delete">X</div>
        <div class="price">1000.00</div>    
      </div>
</div>

CSS

.name {
    background-color: red;
    display: inline;
    float: left;
}

.delete {
    background-color: green;
    display: inline;
     margin-right: 25px;
}

.price {
    background-color: blue;
    display: inline;
    margin-right: 5px;
}

.row {
    width: 450px;
    background-color: yellow;
    border: 1px solid blue;
    min-height: 100px;
    vertical-align: middle;
    position: relative
}

.info {
    float: right;
    display: inline-block;
    background-color: ccc;
    border: 1px solid green;
    
    margin: 0;
   position: absolute;              
   top: 50%;                        
   transform: translate(0, -50%)
}