Rozjeżdżanie się div'ów po dodaniu tekstu

pytanie zadane 26 marca 2020 w HTML i CSS przez poldeeek Mądrala (5,980 p.)

Witam, stworzyłem div-kontener, który posiada w sobie dwa divy odpowiednio po 25% i 75% szerokości ekranu. Gdy pierwszy z nich jest pusty, wszystko jest ładnie, jednak po wrzuceniu do niego jakiegokolwiek tekstu, zjeżdża on nagle na dół i zaczyna się na poziomie dodanego tekstu w stosunku do drugiego diva. Byłbym wdzięczny za wytłumaczenie jaki jest powód takiego zachowania elementów...
1 div :

        <div className={styles.ObjectInfoContainer}>
            fdsfa< br/>
            gdf
        </div>

.ObjectInfoContainer {
    background-color: green;
    display: inline-block;
    width: 25%;
    height: 600px;
    color: white;
}

2 div:

        <div className={styles.ObjectMapsContainer}>
            <GoogleMap
                apiKey={'...'}
                center={[59.938043, 30.337157]}
                zoom={9}>
            </GoogleMap>
        </div>

.ObjectMapsContainer {
    background-color: green;
    display: inline-block;
    width: 75%;
    height: 600px;

}

i ich kontener:

            <div className={styles.Objects}>
                <ObjectInfo />
                <ObjectsMap />
            </div>

.Objects {
    text-align: center;
}

Zdjęcie przed dodaniem tekstu do ObjectInfo:

i zdjęcie po dodaniu tego tekstu:

komentarz 26 marca 2020 przez Paweł Nąckiewicz Nałogowiec (48,990 p.)

jesteś w stanie wrzucić to na https://codesandbox.io/s/?

komentarz 26 marca 2020 przez poldeeek Mądrala (5,980 p.)

Mógłbym wrzucić tylko nie wiem jak dodać google-map-react

komentarz 26 marca 2020 przez poldeeek Mądrala (5,980 p.)

Dobra nawet nie potrzeba, okazuje się, że mapa nie ma żadnego wpływu, ponieważ problem i tak się pojawia:
https://codesandbox.io/s/condescending-clarke-8qxv0
I czy wstawie w jednym czy w drugim divie tekst, to i tak ten drugi zawsze się przesuwa na dół.