Untitled

<body>
    <div class="wrapper">
        <div class="map"></div>
        <div class="events">
            <div class="event"></div>
            <div class="event"></div>
            <div class="event"></div>
            <div class="event"></div>
        </div>
    </div>
</body>

body {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    overflow-y: hidden;
}

.wrapper {
    display: grid;
    grid-template-columns: 50% 50%;
    overflow: hidden;
}

.events {
    overflow: auto;
    position: relative;
    width: 100%;
    height: 100vh;
    top: 32px;
    right: 0;
}

.event {
    margin-bottom: 32px;
    padding-top: 40px;
    padding-bottom: 64px;
    padding-left: 48px;
    padding-right: 48px;
    border-bottom: 1px solid black;
    font-family: 'Montserrat', sans-serif;
    position: absolute;
    font-size: 18px;
}