I want to overlay a rectangle on top of another rectangle

I want to form something like this using CSS and typescript/JavaScript:

Can someone please help me understand how to do this?

I tried using a flex container and this is what I have got this:

I am new to front end development. Can someone please tell me what I am missing here?

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.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;
}

<!-- language: lang-html -->

<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>

<!-- end snippet -->

Just like isherwood mentioned, this is an HTML/CSS issue.

• You've added the class using styleName which is incorrect. It should be className
• You've missed the positioning for the black-area

I created this CodeSandbox with the answer. You can change the inline style to control the positioning of the black-area