Html 引导div未对准

我在小屏幕上有一个对齐问题。正如您在下面的代码中所看到的，在一个小屏幕上，第一行“防空洞”无法对齐，因为内容物的长度不同（“含有天然成分的常规”需要两行）。有办法解决这个问题吗

选择
你会选择以下哪一项

抗龋齿部分保护敏感型牙膏品牌Price牙膏1含氟化物部分保护的抗龋齿牙膏Nose敏感型牙膏品牌敏感型牙膏价格$5
选择
牙膏2防空洞，具有天然成分Startar保护，是敏感的牙齿，具有极高的强度品牌ARM&Hammer价格$2
选择
以上都没有

您不能通过并排放置3组行来实现这一点。他们彼此没有关系必须使用一组行，每行包含3列。

这里有一个工作片段。请参阅整页模式

选择
你会选择以下哪一项

牙膏1
牙膏2
抗空洞
含氟防空洞剂
抗空穴调节器
天然成分
酒石保护
酒石保护号
牙垢保护是的
敏感牙
敏感牙
敏感牙
变白
白化规则
增白增强
烙印
布兰德森索德因
BrandArm&Hammer
价格
价格5美元
价格2美元
选择
选择
以上都没有

您可能需要通过媒体查询来破解它。找到那个div并添加

填充底部：28px！重要的。否则，需要某种特殊的网格/柔性。我可以想出一个没有那么优雅的解决方案，在简短的内容中添加一堆。但我希望有一个更好的解决方案，这样我就不必每次都修改内容了。是的，不要这样做。我认为唯一的方法是使用不同的网格，但不是我的专长。我想可能有一些内置的引导功能。（？）或使这两个div具有两条线所需的最小高度。这将意味着为多个条目留出额外的空间，但它会修复它。如果不完全重做html结构，我认为没有一种干净的方法不使用js。就HTML和CSS而言，这是一个可以使用的插件，它们是两个完全不相关的元素，所以没有简单的方法来匹配它们的高度。在不改变结构的情况下，最常见的方法是使用一个短js脚本使它们的高度相等。