JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    A <img src="http://img225.imageshack.us/img225/7005/bce3bf4c851b4adc8c4e1ff.png" />
    B
    <img src="http://img225.imageshack.us/img225/7005/bce3bf4c851b4adc8c4e1ff.png" />
    C
</div>
<div class="transformA">
    A <img src="http://img225.imageshack.us/img225/7005/bce3bf4c851b4adc8c4e1ff.png" />
    B
    <img src="http://img225.imageshack.us/img225/7005/bce3bf4c851b4adc8c4e1ff.png" />
    C
</div>
<div class="transformB">
    A <img src="http://img225.imageshack.us/img225/7005/bce3bf4c851b4adc8c4e1ff.png" />
    B
    <img src="http://img225.imageshack.us/img225/7005/bce3bf4c851b4adc8c4e1ff.png" />
    C
</div>
<div class="widthheight">
    A <img src="http://img225.imageshack.us/img225/7005/bce3bf4c851b4adc8c4e1ff.png" />
    B
    <img src="http://img225.imageshack.us/img225/7005/bce3bf4c851b4adc8c4e1ff.png" />
    C
</div>

CSS

/* Note the annoying problem with the bounding box! */
* { font-size: 16px; font-family: Times New Roman; }
div {
    width: 275px;
    border: 6px solid black;
    margin: 6px 0 6px 0;
}
div img {
    border: 6px solid gray;
    width:100px;
}
div.transformA > img {
    height:auto;
    transform:matrix(0.5,0,0,0.5,0,0);
}
div.transformB > img {
    transform:scale(0.5);
    transform-origin:0% 50%;
}
div.widthheight > img {
    width:50px;
    height:50px;
}