父容器显示flex时如何显示子div的内联块？

Question

我无法并排显示我的子div标签，而父div标签显示为flex，如果有人可以告诉我如何让它工作，那就太棒了！这是我的代码示例：

CSS

    .wrapper{
    z-index: +1;
    display: flex;
    flex-direction: column;
    height: 100vh;
    align-items: baseline;
    justify-content: space-around;
}
.wrapper .logo{
    outline: 1px solid #fff;
    width: 400px;
    height: 150px;
}
.wrapper .logo img{
    width: 100%;
}
.wrapper .discription{
    width: 320px;
    outline: 1px solid #fff;
}
.wrapper .discription h1{
    color: #fff;
    padding: 0;
    margin: 0;
    text-transform: uppercase;
}
.wrapper .links{
    outline: 1px solid #fff;
}
.wrapper .links nav ul{
    list-style-type: none;
    list-style: none;
    padding: 0;
    margin: 0;
}
.wrapper .links nav ul li{
    display: block;
}
.wrapper .links nav ul li a{
    font-size: 20px;
    color: #fff;
    padding: 10px;
    display: block;
    text-transform: uppercase;
    text-decoration: none;
}

HTML

   <div class="wrapper">
        <div class="logo">
            <img src="images/fire-engine.png" draggable="false">
        </div>
        <div class="discription">
            <header>
                <h1>Best non-host mw2 menu cheat engine [cex/dex]</h1>
            </header>
        </div>
        <div class="links">
            <nav>
                <ul>
                    <li><a href="#">home</a></li>
                    <li><a href="#">pricing</a></li>
                    <li><a href="#">support</a></li>
                    <li><a href="#">login</a></li>
                </ul>
            </nav>
        </div>
    </div>

我正在尝试做什么，类似于：