同一行中的两个文本,一个左对齐,另一个居中

Two texts in the same line one aligned left the other centered

我有一个愚蠢的问题。 我希望两个文本保持在同一行,但是一个 text-align: left; 和另一个 text-align: center;

正确的做法是什么?

.number{
  text-transform:uppercase;
  letter-spacing:1px;
  text-align:left;
  display:inline;
  width: 50px;
  margin-top:-10px; 
  float:left;
  font-size:18px;
}

.menutitle{
  display:block;
  text-transform:uppercase;
  letter-spacing:1px;
  text-align:center;
  font-size:18px;
  margin-bottom:31px;
}
<span class="number">00</span><span class="menutitle">TEXT</span>

您可以使用 Flexbox

.element {
  display: flex;
}

.menutitle {
  flex: 1;
  text-align: center;
  background: lightgreen;
}
<div class="element">
  <span class="number">00</span>
  <span class="menutitle">TEXT</span>
</div>