我想使用CSS和typescript/JavaScript创建类似这样的内容：

有人能告诉我怎么做吗？
我尝试使用一个灵活的容器，这是我得到了这个：

我是前端开发的新手，有没有人能告诉我我在这里错过了什么？

.green-area {
  display: flex;
  flex-grow: 1;
  margin-right: @space-sm;
  position: relative;
}

.black-area {
  display: flex;
  flex-grow: 1;
  position: absolute;
  background: #000000;
  height: 20px;
  width: 5%;
}

.height {
  height: @space-sm;
}

<div styleName="green-area">
  <div style={{ flexGrow: 10, }}>
    <div styleName={`height`}>
      <div styleName="black-area">
        <div style={{ flexGrow: 10, }}>
          <div styleName={`height`} />
        </div>
      </div>
    </div>
  </div>
</div>