Css 在fluidRow中跨列垂直对齐项目

我有一个闪亮的应用程序，包括一个带有4列的

fluidRow

。每列有三项：

副标题（

h4（…）

）

图像（

img（…）

）或滑块（

sliderInput（…）

）

两行文本（

textOutput（…）

）

fluidRow(
纵队(
3.
h4（“平坦地形”），
img（src=“walk flat terrain.png”，
style=“高度：150px；”，
text输出（outputId=“eg1\u uphill”），
text输出（outputId=“eg1\u下坡”）
),
纵队(
3.
h4（“2.86°坡度（1:20坡度）”），
img（src=“casual walk.png”，
style=“高度：150px；”，
text输出（outputId=“eg2\u uphill”），
textOutput（outputId=“eg2\u downshill”），
),
纵队(
3.
h4（“20°坡度”），
img（src=“uphill slope.png”，
style=“高度：150px；”，
text输出（outputId=“eg3\u uphill”），
text输出（outputId=“eg3\u下坡”）
),
纵队(
3.
h4（“那……”）呢，
#200px高度，与图示相同
div(
style=“高度：200px；边距：自动；”，
滑音输入(
inputId=“自定义坡度”，
label=“坡度（度）”，
最小值=0，最大值=45，步长=0.1，
值=5，
宽度=“80%”）
),
textOutput（outputId=“custom\u uphill”），
text输出（outputId=“自定义\下坡”）
)
)

闪亮应用程序的输出如下所示

问题是这些项目现在没有垂直对齐。我想在列之间对齐项目，就像一个有3行4列的表，每个项目都放在一个“单元格”中

我尝试将每个项目移动到单独的

fluidRow

（即有三个

fluidRow

，每一行存储每个项目）。但是，这些项目不符合窗口宽度较窄的要求