JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Documento sin tĂ­tulo</title>
<style>

</style>
</head>

<body>

    <div class="contenedor">
        <div class="cajaproducto"><span class="texto">Producto uno<br/>continua producto</span></div>
        <div class="cajaprecio"><span class="texto">$120000.50</span></div>
        <div class="puntos"></div>

    </div>
    
    <div class="contenedor">
        <div class="cajaproducto"><span class="texto">Producto dos: </span></div>
        <div class="cajaprecio"><span class="texto">$120000.50</span></div>
        <div class="puntos"></div>

    </div>
    
    <div class="contenedor">
        <div class="cajaproducto"><span class="texto">Producto tres tres tres</span></div>
        <div class="cajaprecio"><span class="texto">$12000588954560.50</span></div>
        <div class="puntos"></div>

    </div>
 

</body>
</html>

CSS

.contenedor{
    width:100%;
    height:50px;
    overflow:hidden;
    }
.cajaproducto{
    float:left;
    height:100%;
    display:table;
     }

.cajaprecio{
    height:100%;
    float:right;
    display:table;
}

.puntos{
    height:90%;
    border-bottom:1px dashed #666;
    overflow:hidden;
}

.texto{
    display:table-cell;
    vertical-align:bottom;}