<!doctype html>
<div style="margin:2px; float:left; height:300px;border:2px solid black;-webkit-writing-mode:vertical-lr">
<div style="width:25px;background-color:green"></div>
<img style="display:block;height:50%; border-block-start:2px solid maroon; border-block-end:2px solid maroon; border-inline-start: 1px solid purple; border-inline-end:5px dashed grey" src="resources/circle.svg">
<img style="margin-inline-start: 40px; display:block;height:50px" src="resources/oval.png">
<div style="width:25px;background-color:green"></div>
</div>

<div style="margin:2px; float:left; height:300px;border:2px solid black;-webkit-writing-mode:vertical-lr; direction:rtl">
<div style="width:25px;background-color:green"></div>
<img style="display:block;height:50%; border-block-start:2px solid maroon; border-block-end:2px solid maroon; border-inline-start: 1px solid purple; border-inline-end:5px dashed grey" src="resources/circle.svg">
<img style="margin-inline-start: 40px; display:block;height:50px" src="resources/oval.png">
<div style="width:25px;background-color:green"></div>
</div>