Align rotated div to right side - html

Question

I am working on a code where I have to make my buttons in vertical and to right side of image, which was placed horizontally on top of image before
My piece of code is :
<div style="display: flex; width:100%; height: 100%;">
<div class="thumbnailSelector" *ngIf="seriesList.length > 1" style="margin-right: 5px;">
<div class="thumbnails list-group" style="height: 100%;">
<a *ngFor="let series of seriesList; let i=index" [ngClass]="{'active': currentSeriesIndex === i}"
class="list-group-item" oncontextmenu="return false" unselectable="on" onselectstart="return false;"
onmousedown="return false;" (click)="showSeries(i)">
<div thumbnail [imageData]="series.imageList[0]" class="csthumbnail" oncontextmenu="return false"
unselectable="on" onselectstart="return false;" onmousedown="return false;">
</div>
</a>
</div>
</div>
<!--container where image will be loaded-->
<div style=" width: 100%; height: 100%;">
<div style="width: 80%; height: calc(100% - 60px);position:relative;display:inline-block;color:white;"
oncontextmenu="return false" class='cornerstone-enabled-image' unselectable='on'
onselectstart='return false;' onmousedown='return false;'>
<div cornerstone
style="width: 100%; height: 100%;top:0px;left:0px;position:absolute;outline:none;margin: 0 auto;"
id="dicomImage">
</div>
{{viewPort.zoomValue | async}}
</div>
<!-- Toolbar in RS -->
<div>
<div class="btn-group" style="transform: rotateZ(90deg);">
<div class="btn-group" *ngIf="enableViewerTools">
<!-- Invert -->
<button type="button" (click)="invertImage()" class="btn btn-sm"
style="font-size: 24pt; color:white;" data-container='body' data-toggle="tooltip"
data-placement="bottom" title="Invert"><span class="fa fa-adjust"></span></button>
<!-- Zoom -->
<button type=" button" (click)="enableZoom()" class="btn btn-sm"
style="font-size: 24pt; color:white;" data-container='body' data-toggle="tooltip"
data-placement="bottom" title="Zoom"><span class="fa fa-search"></span></button>
<!-- Pan -->
<button type="button" (click)="enablePan()" class="btn btn-sm" style="font-size: 24pt; color:white;"
data-container='body' data-toggle="tooltip" data-placement="bottom" title="Pan"><span
class="fa fa-arrows-alt"></span></button>
<!-- Length measurement -->
<button type="button" (click)="enableLength()" class="btn btn-sm"
style="font-size: 24pt; color:white;" data-container='body' data-toggle="tooltip"
data-placement="bottom" title="Length"><span class="fa fa-arrows-alt-v"></span></button>
<!-- Angle measurement -->
<button type="button" (click)="enableAngle()" class="btn btn-sm"
style="font-size: 24pt; color:white;" data-container='body' data-toggle="tooltip"
data-placement="bottom" title="Angle"><span class="fa fa-angle-left"></span></button>
<!-- Pixel probe -->
<button type="button" (click)="enableProbe()" class="btn btn-sm"
style="font-size: 24pt; color:white;" data-container='body' data-toggle="tooltip"
data-placement="bottom" title="Pixel Probe"><span class="fa fa-dot-circle"></span></button>
<!-- Elliptical ROI -->
<button type="button" (click)="enableElliptical()" class="btn btn-sm"
style="font-size: 24pt; color:white;" data-container='body' data-toggle="tooltip"
data-placement="bottom" title="Elliptical ROI"><span class="fa fa-circle"></span></button>
<!-- Rectangle ROI -->
<button type="button" (click)="enableRectangle()" class="btn btn-sm"
style="font-size: 24pt; color:white;" data-container='body' data-toggle="tooltip"
data-placement="bottom" title="Rectangle ROI"><span class="fa fa-square"></span></button>
<!-- Reset Image -->
<button type="button" (click)="resetImage()" class="btn btn-sm"
style="font-size: 24pt; color:white;" data-container='body' data-toggle="tooltip"
data-placement="bottom" title="Reset Image"><span class="fa fa-window-restore"></span></button>
</div>
</div>
</div>
</div>
Now it looks like :
https://imgur.com/a/mxp0uPa
What I want my image to look like is : https://imgur.com/a/KM6UHh4
I am using angular so pardon me for the data binding, in case I am missing anything let me know.

Answer 1

You may take a look at writing-mode.
basic example with flex and writing-mode:
.button-sideway {
writing-mode: vertical-rl;
}
/* flex layout used */
.flex {
display: flex;
height: 100%;
}
figure {
margin: auto;
}
.button-sideway {
margin: 1em 1em 0 auto;
}
/* demo*/
img {
max-height: 70vh;
}
body {
margin: 0;
padding: 0;
height: 100vh;
box-sizing: border-box
}
<div class="flex">
<figure>
<img src="http://dummyimage.com/400">
<figcaption>
<!-- description-->
</figcaption>
</figure>
<nav class="button-sideway">
<button>btn</button>
<button>btn</button>
<button>btn</button>
<button>btn</button>
</nav>
</div>
if it is not about rotating the container, but stacking icon, drop the wrtiting-mode and make your buttons block so they stack on top of each others.