使用HTML和CSS具有可变宽度的2列

我正在努力开发一个产品清单，上面有图片、标题和价格。 在顶部我有图片，下面是标题和价格

问题在于，所有权的价格具有可变的长度。价格应该占据所有它需要的空间，标题可以占据剩余的空间。如何做到这一点

例如：

上面的图片没有编码，这是我想要完成的。html代码非常基本：

<div class="product">
    <div class="content">
        <div class="image">
            <img src="..."/>
        </div>
        <div class="product-bottom">
            <div class="title">
                <h3><a href="...">...</a></h3>
            </div>
            <div class="price">
                &euro; 199<sup>99</sup>         
            </div>
        </div>
    </div>
</div>

&欧元；19999

如果没有任何代码，很难帮助您，但是您可以将价格标签的跨度宽度设置为一个定义的填充，而标题应具有

文本溢出：省略号，以及
空白：nowrap
和左右浮动
您可以使用display
table
和
table cell
-为price列指定一个小于price的宽度，而为title指定一个宽度，如果price列更大，它将始终拉伸price列。然后也可以进行垂直对齐

.product-bottom {display:table;}
.title,
.price {display:table-cell; vertical-align:top;}
.price {width:10px;}

请提供代码。所以我可以帮你better@AnkushKondhalkar：添加了代码。问题是省略号和nowrap仅适用于一行。谢谢，我将尝试一下