Html 如何在CSS上并排对齐标题上的两个元素？

我对HTML和CSS是相当陌生的，我试图将标题和搜索对齐在同一行，但我被卡住了。以下是HTML：

HTML:

搜索：

---

如何将标题与表单对齐？谢谢你的帮助

旧的方法是浮动标题元素，如下所示：

<style type="text/css">
  header > h1,
  header > form {
    float: left;
  }
  header {
    clear: both;
  }
</style>

标题>h1，
标题>表格{
浮动：左；
}
标题{
明确：两者皆有；
}

或者，更现代、更好的方法是使用CSS网格来实现这一点，如下所示：

<style type="text/css">
  header {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
</style>

标题{
显示：网格；
网格模板柱：1fr 1fr；
}

值

1fr

表示“一个灵活单位”，与其他灵活单位成比例。因此，在这种情况下，它将相当于50%50%。

标题{
填充：10px；
}
#标题，
#搜寻{
显示：内联块；
保证金：0；
}
#搜寻{
浮动：对；
}

搜索：

正文{
边际：0px；
}
标题{
填充：0px 15px；
显示器：flex；
显示：-webkit flex；
对齐项目：居中；
证明内容：之间的空间；
}
#搜寻{
边际：0px；
}

搜索：

？如果您尝试了第一种，您可能需要显式地设置h1和表单的宽度。我尝试了这一种，但搜索表单只是隐藏在导航栏后面