JSFiddle - React, Tailwind, and code Playground

HTML

<my-el-a class="my-el">
    <img src="https://s3-eu-west-1.amazonaws.com/uploads-eu.hipchat.com/214790/1500400/lX8QKASWLAKotii/29e222d6-5828-4c3e-8153-5d5d065e91b1-original.png"/>
</my-el-a>

<my-el-b class="my-el">
    <img src="https://s3-eu-west-1.amazonaws.com/uploads-eu.hipchat.com/214790/1500400/lX8QKASWLAKotii/29e222d6-5828-4c3e-8153-5d5d065e91b1-original.png"/>
</my-el-b>

<my-el-c class="my-el">
    <img src="https://s3-eu-west-1.amazonaws.com/uploads-eu.hipchat.com/214790/1500400/lX8QKASWLAKotii/29e222d6-5828-4c3e-8153-5d5d065e91b1-original.png"  style="width:50px; height:50px;""/>
</my-el-c>

CSS

my-el-a {
    display: inline-block;
    width: 50%;
    border: 1px solid red    
}

my-el-b {
    display: inline-block;
    width: 50%;
    border: 1px solid green;    
    height: 100px;
}

my-el-c {
    display: inline-block;    
    border: 1px solid silver;    
}

.my-el img, .my-el canvas {    
    display: block; 
    width: 100%;
    height: 100%;
    max-width: inherit;
    min-width: inherit;
    max-height: inherit;
    min-height: inherit;
}