Pomoc w kodzie - html/css

pytanie zadane 12 września 2020 w HTML i CSS przez Błażej Stochmal Początkujący (370 p.)

Witam, w zdjęciu załączonym poniżej widać, że 2 pierwsze kolumny są na jednakowej długości ze względu na ilość takich samych wierszy, w przypadku 3. kolumny gdy jest mało wierszy "schodzą" w dół.
Prosiłbym o pomoc w celu ustanowienia 3. kolumny na jednakowej wysokości pozostałych nie zważając na ilośc wierszy.

kod:

<!DOCTYPE HTML>
<html lang="pl">
<head>
	<meta charset="utf-8" />
	<title>tytul</title>
	<meta name="description" content="x" />
	<meta name="keywords" content="x" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	
	<link rel="stylesheet" href="style.css" type="text/css" />
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;1,700&display=swap" rel="stylesheet">
	
</head>

<body>
    
    <header>
        <h1 class="logo">a<span id="logo">b</span></h1>
            <nav>
                <ul class="menu">  
                    <li><a href="index.html">Strona główna</a></li>
                    <li><a href="chwytaki.html">Chwytaki</a></li>
                    <li><a href="">Dla instalatorów</a></li>
                    <li><a href="kontakt.html">Kontakt</a></li>
                    <li><a href="#">c</a></li>
                </ul>
            </nav>
    </header>
    <main>
        <div class="container">
            <article>
                <div class="kon">
                    <h2>a</h2>
                        <b>b</b>
                       <p>c</p> 
                       <p>d</p> 
                       <p>e</p> 
                       <p>f</p> 
                       <p><b>g</b></p> 
                        <p>h</p>
                        <p>i</p> 
                </div>
                <div class="kon">
                    <h2>j</h2>
                    <b>k</b>
                        <p>l</p>
                        <p>l</p>
                        <p>m</p>
                        <p><b>n</b></p>
                        <p>o)<p>
                        <p>p</p>
                        <p>r</p>      
                </div>
                <div class="kon">
                    <h2>s</h2>
                </div>
            </article>
        </div>
    </main>

        <footer>
        </footer>

</body>
</html>

CSS:
.container
{
    background-color: #fff;
    margin-left: auto;
    margin-right: auto;
    width: 1100px;
    text-align: center;
    padding: 15px;
    margin-top: 10px;
}

.kon
{
    width: 300px;
    display: inline-block;
}

}