Css 跨度显示内联块工作不正常

我有一个

文本框和一条验证消息分配给它。我试图将验证消息内联到
文本框
，但它就在它下面。我尝试过不同的选择，但没有一个有效。以下是相同的代码：

HTML

<div class="col-lg-3 wrap">
  <span>
    <input class="mandatoryText vtooltips form-control textbox validationInput" style="width: 100%; vertical-align: top; border-radius: 4px;" maxlength="100" name="tradeName" type="text">
    <span class="vspan" style="display: inline-block;">Please enter Name</span> 
  </span>
</div>

这里有一个相同的例子

所需输出为：


任何帮助都将不胜感激。谢谢。
请执行以下更改：

<div class="col-lg-3 wrap">
  <span>
    <input class="mandatoryText vtooltips form-control textbox validationInput" style="width: 70%; vertical-align: top; border-radius: 4px;" maxlength="100" name="tradeName" type="text">
    <span class="vspan" style="display: inline;">Please enter Name</span> 
  </span>
</div>


请输入您的姓名

请从此处开始参考：
最简单的方法是使用CSS Flexbox。使您的
成为
flex
容器，而不是
内联块
，如下所示：

span {
  display: flex;
}

请看下面的代码片段：


此处使用的CSS将在bootstrap.CSS之后应用*/
输入[type=text].vtooltips{
位置：相对位置；
显示：内联；
高度：20px；
}
vspan先生{
/*位置：绝对位置*/
显示：无；
字体大小：12px；
字体系列：Arial；
颜色：白色；
边界半径：3px；
背景：#DC000C；
宽度：50%；
高度：20px；
边框：1px实心#6d6d；
线高：0px；
文本对齐：居中；
/*可见性：隐藏*/
边界半径：4px；
盒影：2p2px0px#afb1b1b1；
左边距：5px；
线高：15px；
}
.付诸表决，
.重点：，
.验证输入：悬停{
背景色：#FFFFE0！重要；
边框：1px纯红！重要；
高度：20px
}
.第一个孩子{
显示器：flex；
位置：相对位置；
溢出：隐藏；
宽度：100%
}
.wrap span:第一个子项。输入保持器：之后{
内容：''；
位置：绝对位置；
顶部：-5px；
右：-5px；
宽度：0；
身高：0；
边框宽度：5px；
边框颜色：红色；
边框样式：实心；
变换：旋转（45度）；
长方体阴影：0 1px#FFFFE0
}
身体{
利润率：30像素；
}

请输入您的姓名

只需在下面添加css即可

span.vspan{
    margin-top: 5px;
    display: flex;
}
.wrap span:first-child {
       display: flex;
}

---

不，它不起作用。你能提供一个工作样本吗？我参考了演示。但是正如你所看到的，右上角的三角形应该在文本框上，而不是在文本框外。你能提供同样的吗？它在一定程度上起作用。但是在我提供的图像中，我的文本框右上角有一个三角形。使用您的解决方案，三角形将消失。我也需要那个三角形。@SenjutiMahapatra我已经更新了我的答案，现在请看一下，这将解决你的问题。只是一个小小的结构变化。@SenjutiMahapatra这是我的荣幸！

span.vspan{
    margin-top: 5px;
    display: flex;
}
.wrap span:first-child {
       display: flex;
}