怎样让一个div中一个元素在最左边，另一个元素在最右边？

Question

我想实现的效果大概是这样

标题
----
时间         button

我最初标题垂直所在部分放在一个div里，然后将这个div和button再塞到一个div里，我将button的margin-left设置为80%，才实现了上面这个结果（button的宽带不能变啊，它就这么大，我也改过标题所在的div的margin-right: 80%），问题在于标题的长度是会变的，写了button的margin-left相当于写死了标题的长度，当我的标题变长的时候，就变成这个样子了

标题
标题
----
时间/* 我是空余部分 */button

所以要怎样调整button和标题部分中间的空余部分啊？
动态调整？标题的长度增加，button的margin-left自动变短？

Answer 1

直接上DEMO了

<div class="wraper">
  <div class="content">
    <span>标题</span>
    <span>----</span>
    <span>时间</span>
  </div>
  <div class="btn">
    <button>button</button>
  </div>
</div>

.wraper{
    width: 500px;
    border: 1px solid;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}
.content{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

Answer 2

外层div display:flex;justify-content:space-between;align-items:flex-end;
标题div flex:1;

Answer 3

使用flex布局不爽吗?让代码更简单。