我有一个带有标签和提示的开关。但是标签应该是可点击的，而提示不应该。因此标签容器被 Package 在一个里面，但提示容器不是。我需要标签和提示堆叠并对齐，但两者都有可变的宽度。如果你碰巧有一个想法，这里是标记。我已经尝试了它与flexbox，但如果我给予提示容器一个左边距，它将不会对齐，一旦标签更宽，因为更多的内容。我已经尝试了位置“绝对”，它的工作，但随后将是一个问题，因为我还必须考虑自定义标签是放置在左边的开关。我感谢任何帮助

<div class="container" >
   <label class="trial">
       <div class="switch__container">
           <input class="input" type="checkbox"
           />
               <span class="switch"></span>
       </div>
         <div class="switch__label-container">
             <span class="switch__label">
               {{ label }}
             </span>
         </div>
     </label>
     <div class="switch__hint-container">
         <span v-if="hint || $slots.hint" class="switch__hint">
             <slot name="hint">
               {{ hint }}
             </slot>
         </span>
     </div>
 </div>

我已经尝试使用此解决方案中提到的grid：它看起来像这样]（https://i.stack.imgur.com/tlAGh.png）]（https://i.stack.imgur.com/tlAGh.png）

.container {
   display: grid;
   grid-template-columns: max-content 1fr 1fr;
   border: 1px solid green;
   align-items: self-start;
   min-height: 48px;
   justify-content: left;
}

.trial {
    display: grid;
}

.switch__container {
    width: 56px;
    height: 48px;
    cursor: pointer;
    padding: 8px 5px 5px 5px;
    border: 1px solid orange;
    grid-column: span 3;
}
.switch__label-container {
    grid-row: span 2;
}

.switch__hint-container {
    grid-row: span 2;
}

我也试过使用FlexBox，它有点效果，但如果标签更长，提示就会与标签不对齐。