如何在同一个弹出窗口中显示多个不同的 div？

我正在尝试制作的屏幕；

我能做的屏幕；

从图片中可以看出；第二张图片中的 div 彼此分开。我正在尝试像第一张图片中那样做，但我做不到。我想在同一个弹出窗口中显示传入的数据。

html

<div className="installmentinfo__container">
  {
    props.installmentList?.map((e, i) => {
      return (
        <div className="installmentinfo">
          <div className="column">
            <div className="installmentnumber" >{(i + 1).toString()}</div>
            <div className="installmentdate">{e.date}</div>
            <div className="installmentamount">{e.amount} {e.currency}</div>
          </div>
        </div>
      );
    })
  }
</div>

css

.installmentinfo__container {
  position: absolute;
  right: 340px;

  .installmentinfo {
    background-color: white;
    width: 280px;
    height: auto;
    border: var(--border);
    border-radius: 0.5em;
    padding: 0.5em 1em;

    .column {
      display: flex;
      margin: 5px;
      justify-content: space-between;
      font-size: 1.3rem;
      border-bottom: 1.5px solid #d1d1d1;
    }

    .installmentnumber {
      float: left;
    }

    .installmentdate {
      width: 50%;
      color: black !important;
    }

    .installmentamount {
      width: 50%;
      color: black !important;
      font-weight: 1000;
    }
  }
}