div with table display: alignment issue

I have the following code:

div {
       box-sizing: border-box;
       border-style: solid;
}
div.table {
       display: table;
}
div.row {
       display: table-row;
}
div.cell {
       display: table-cell;
}
div.logo {
       width: 200px;
       height: 200px;
       border-color: red;
}

<div class="table">
    <div class="row">
       <div class="cell">
           <div class="logo"></div>
       </div>
       <div class="cell">
           Content
       </div>
    </div>
</div>

The content of the second cell is aligned to the bottom of the div in the first one and appears at the very bottom of it's cell. When both cells are filled with text then content in both floats at the top.

How can I get the content of the second cell to be positioned at the top of it's cell?

The question must be silly, but I'm an absolute beginner in css and just don't know how to approach the issue.