Document Upload Section with Tick Marks Chatgpt Prompting

PHOTO EMBED

Mon May 22 2023 06:08:51 GMT+0000 (Coordinated Universal Time)

Saved by @JISSMONJOSE

"""
<div className="top">
  <div className="left-container">
    <div className="file-upload-icon">
      <img src={FileUploadIcon} alt="File Uploader Icon" />
    </div>
    <div className="document-title">Testator Passport</div>
  </div>
  <div className="tick-icon">
    <img src={TickMarkIconGreen} alt="Tick Mark" />
  </div>
</div>

<div className="middle">
  <div className="left-container">
    <div className="file-upload-icon">
      <img src={FileUploadIconDark} alt="File Uploader Icon Dark" />
    </div>
    <div className="document-title text-black">Additional Document</div>
  </div>
  <div className="tick-icon">
    <img src={TickMarkIconGreen} alt="Tick Mark" />
  </div>
</div>

<div className="bottom">
  <div className="left-container">
    <div className="file-upload-icon">
      <img src={FileUploadIconDark} alt="File Uploader Icon Dark" />
    </div>
    <div className="document-title text-black">Executor Passport</div>
  </div>
  <div className="tick-icon">
    <img src={TickMarkIconGreen} alt="Tick Mark" />
  </div>
  <div />
</div>
"""

"""
.container {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.top, .middle, .bottom {
    display: flex;
    justify-content: space-between;
    background-color: #f4f4f4;
    border-radius: 5px 0px 0px 5px;
}

.top {
    display: flex;
    align-items: center;
    background-color: #023979;
}

.container div {
    padding: 5px;
    text-align: center;
    cursor: pointer;
}

.document-title {
    font-family: 'Basis Grotesque Arabic Pro';
    font-style: normal;
    font-weight: 700;
    font-size: 0.875rem;
    line-height: 14px;
    color: #FFFFFF;
}

.left-container {
    display: flex;
    align-items: center;
    margin-right: 12px;
}

.file-upload-icon,
.document-title {
    margin-right: 12px;
}

.tick-icon {
    margin-left: auto;
}
"""

You are experienced css expert.

I want to resolve one design issue in my code.

Here tick-icon div element of top and middle elements are aligned properly with same margin around it. 
tick-icon div of top element matches with middle element. They share same margin right spacing.
butBtick-icon div element of bottom div element is not aligned when compared with top and middle element.
I Found it takes more margin / spacing on its right side compared with top and middle div element.
Help me to fix this issue with tick-icon element of bottom div element. Finally all tick-icon elements should share same margin/spacing.
Suggest me to make changes in styling and return upated version of code.

content_copyCOPY