如前所述，在这里使用：before和：after是不必要的，而且会适得其反。但你也没有充分利用Flexbox的潜力。（或者Grid会是一个更好的选择，我认为。）无论如何，这里有一个快速的flex演示：

html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;

.typebar {
    min-width: 0;
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
    border: 5px solid red;
    display: flex;
    justify-content:space-between;
    }

.typebar .left {
    border: 5px solid #566573;
    background: #eeeeee; 
    cursor: text;
    flex-grow: 1;
    }

.typebar .right {
    font-weight: 600;
    border: 5px solid #566573;
    color: #eeeeee;
    background: #2C3E50;
    cursor: pointer;
    width: min-content;
    }

.left, .right {
  margin: 0;
}

<div class="typebar">
  <p class="left"></p>
  <p class="right">PESTER</p>
</div>

您可以给予位置：absolute to：：before and：：after伪元素withleft：0表示：：beforeandright：0表示后的：：，而不是float属性。下面是更新后的代码：-

.typebar {
    min-width: 0;
    max-width: 620px;
    max-height: 40px;
    margin-left: auto;
    margin-right: auto;
    border: 5px solid red;
    display: flex;
    position: relative; 
 }

.typebar:before {
    content: '';
    border: 5px solid #566573;
    padding: 26px 85% 0 0;
    background: #eeeeee; 
    position: absolute;
    left: 0;
    cursor: text;
 }

.typebar:after {
    content: 'PESTER';
    font-weight: 600;
    border: 5px solid #566573;
    padding: 5px;
    margin-left: 1%;
    color: #eeeeee;
    background: #2C3E50;
    position: absolute;
    right: 0;
    cursor: pointer;
 }

使用相对单位表示长度，如百分比、vw、vh等。而不是像px这样的绝对单位。在示例A和示例B中，宽度均以vw为单位--每1vw =视口宽度的1%。
顺便说一句，在与用户的实际交互中使用伪元素（即::before和::after）是一个坏主意，因为就HTML和JavaScript而言，它们并不存在--它们纯粹是样式的表现。只有以实际元素或样式为目标，才能间接影响伪元素。在Example B中，我添加了一些额外的CSS、HTML属性和JavaScript“keyup”事件处理程序，以展示::before区域如何模仿[contenteditable]元素。作为按钮进行交互的::after区域不包括在内（将涉及更多内容）。请记住示例B是额外的，不是问题解决方案的一部分。
简而言之，最好使用<input>或[contenteditable]和<button>或<input type="button">，然后将它们 Package 成一个block元素，如<div>或<section>。

示例A

/**
 * vmin for font-size makes fonts responsive and is not required.
 * If the viewport height is less than it's width, then vh
 * is used and vice versa.
 */
:root {
  font: 5vmin/1.15 "Segoe UI";
}

.text {
  display: flex;
  width: 96vw;
  border: 5px solid red;
  overflow: hidden/* For demo purposes */;
  resize: both/* For demo purposes */;
}

.text::before {
  content: "";
  display: flex;
  align-items: center;
  width: 85vw;
  padding: 5px;
  border: 5px solid #566573;
  background: #eeeeee;
  cursor: text;
}

.text::after {
  content: 'PESTER';
  display: flex;
  justify-content: center;
  align-items: center;
  width: 10vw;
  margin-left: 1vw;
  padding: 2px;
  border: 5px solid #566573;
  font-weight: 600;
  color: #eeeeee;
  background: #2C3E50;
  cursor: pointer;

<div class="text"></div>

示例B

document.querySelectorAll(".text").forEach(txt => txt.onkeyup = type);

function type(e) {
  let txt = this.textContent;
  this.dataset.text = txt;
}

/**
 * vmin for font-size makes fonts responsive and is not required.
 * If the viewport height is less than it's width, then vh
 * is used and vice versa.
 */
 :root {
  font: 5vmin/1.15 "Segoe UI";
}

.text {
  display: flex;
  width: 96vw;
  border: 5px solid red;
  font-size: 0;
  overflow: hidden/* For demo purposes */;
  resize: both/* For demo purposes */;
}

.text::before {
  content: attr(data-text);
  display: flex;
  align-items: center;
  width: 85vw;
  padding: 5px;
  border: 5px solid #566573;
  font-size: 5vmin;
  background: #eeeeee;
  cursor: text;
}

.text::after {
  content: 'PESTER';
  display: flex;
  justify-content: center;
  align-items: center;
  width: 10vw;
  margin-left: 1vw;
  padding: 2px;
  border: 5px solid #566573;
  font-size: 5vmin;
  font-weight: 600;
  color: #eeeeee;
  background: #2C3E50;
  cursor: pointer;
}

<div class="text" data-text contenteditable></div>
<div class="text" data-text contenteditable></div>
<div class="text" data-text contenteditable></div>