html - 如何创建内联 h1 和跨度，并将跨度对齐到结尾？

Question

我正在尝试创建最简单的 React 应用程序，并希望创建(使用 bootstrap 4) header ，它有两部分，第一部分在左侧，第二部分在最后.我有这段代码:

 <div className='container justify-content-center'>
    <h1>Todo App <span className='d-flex justify-content-end text-secondary'> today tasks:</span></h1>
</div>

结果，我有:

Todo App
          today tasks:

但我想要这样的结果(没有新行):

Todo App     today tasks:

Answer 1

我只需要做一些东西，像这样:

<div className='app-header d-flex'>
    <h1>Todo App </h1>
    <span className="text-secondary">today tasks: </span>
</div>

并创建 css 规则:

.app-header {
    align-items: flex-end;
  }