JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div id="text">
        <p>Opera is a web browser and Internet suite developed by Opera Software. The browser handles common Internet-related tasks such as displaying web sites, sending and receiving e-mail messages, managing contacts, chatting on IRC, downloading files via BitTorrent, and reading web feeds. Opera is offered free of charge for personal computers and mobile phones.</p>
    </div>
    <div id="logo">
        <img src="http://www.iconarchive.com/icons/benjigarner/softdimension/48/Opera-icon.png" />
    </div>
</div>

CSS

#container {
    border: solid 1px #000;
    width: 600px;
    height: 150px;
}

#text {
    float: left;
    vertical-align: middle;
    text-align: justify;
    width: 500px;
}

#text p {
    /* why doesn't vertical-align: middle work ? */
    padding: 15px;
}

#logo {
    text-align: center;
    float: left;
    width: 100px;
}

#logo img {
    /* why doesn't vertical-align: middle work ? */
}