如何实现带标签/提示的输入框与按钮横向对齐布局

我开发了可生成输入框的组件，现需找到最优布局方案，使所有输入框与按钮横向对齐——标签位于输入框上方，提示文本位于输入框下方。

CSS样式在宿主与组件间隔离，因此我认为CSS Grid并非最佳选择。我可修改组件内部样式（需保留在组件内），也可修改组件外部样式，但不希望外部样式侵入组件内部。

代码示例 #

<div style="display: flex; flex-direction: row; align-items: baseline; gap: 8px;">
  <div class="myComponent" style="width: 100px">
    <input id="myInput" placeholder="No label" style="width: 100%; box-sizing: border-box;"/>
  </div>
  <div class="myComponent"  style="width: 100px">
    <label for="myInput" style="display: block">Hint</label>
    <input id="myInput" placeholder="test" style="width: 100%; box-sizing: border-box;"/>
    <small style="display: block">hint</small>
  </div>
  <div class="myComponent"  style="width: 100px">
    <label for="myInput" style="display: block">Long Hint</label>
    <input id="myInput" placeholder="test" style="width: 100%; box-sizing: border-box;"/>
    <small style="display: block">A really long hint that wraps</small>
  </div>
  <div class="myComponent"  style="width: 100px">
    <label for="myInput" style="display: block">No Hint</label>
    <input id="myInput" placeholder="test" style="width: 100%; box-sizing: border-box;"/>
  </div>
  <button style="text-wrap: nowrap;">My Button</button>
</div>

内容的提问来源于stack exchange，提问作者Tim.Burnell