JSFiddle - React, Tailwind, and code Playground

by ovfiddle

HTML

<!-- 

How can I correctly position the blue logo within the red container, in such a way that if a different image is used the solution still works?

-->

<div id="wrapper">
    <img id="image" src="http://femtoo.com/images/web-tracking-logo.png" />
</div>

CSS

#wrapper {
    width:50px;
    height:150px;
    border:2px solid red;
}
#image {
    -webkit-transform: rotate(-90deg);
    -webkit-transform-origin: 0 0;
    position:relative;
    top:100%;
}