text-align and margin CSS properties are not responsive - html

Question

.scss
div.playlist {
position: relative;
display: inline-block;
}
div.playlist {
span {
position: absolute;
text-align: center;
height: 100%;
width: 100%;
color: white;
font-size: 20px;
}
.span-icon {
padding-bottom: 50px !important;
}
}
div.playlist span:before {
display: inline-block;
vertical-align: middle;
height: 100%;
content: '';
}
.html
<div class="playlist">
<span class="span-icon"><ion-icon [name]="data.icon"></ion-icon></span>
<span>{{data.text}}</span>
<img [src]="data.imageUrl" [alt]="data.text" />
</div>
Out Put
Now I need as shown below.Please don't consider about the different icon type and the text.I just need this.I need a responsive top right and the bottom right appearance of the icon and text.I have tried with text-align: right and the margin properties.But you know that approach is not responsive on different view ports.So can you help me to solve this issue?

Answer 1

Position your both icons and span text as absolute and then if needed you could use CSS calc() function to align them at top-right and bottom-right above the image.
.playlist {
position: relative;
display: inline-block;
width: 240px;
height: 200px;
overflow: hidden;
}
.playlist img {
width: 100%;
height: 100%;
}
.playlist .span-icon {
position: absolute;
top: 5px;
right: calc(100% - 98%);
color: #fff;
}
.playlist .tm {
position: absolute;
bottom: 5px;
right: calc(100% - 98%);
color: #fff;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="playlist">
<span class="span-icon"><i class="fa fa-film"></i></span>
<span class="tm">2:10</span>
<img src="http://lorempixel.com/output/city-q-c-640-480-6.jpg">
</div>

Answer 2

<div class="playlist">
<span class="span-icon"><ion-icon [name]="data.icon"></ion-icon></span>
<span class="span-text">{{data.text}}</span>
<img [src]="data.imageUrl" [alt]="data.text" />
</div>
CSS
.span-icon {
position: absolute;
top: 0;
right: 0;
}
.span-icon {
position: absolute;
bottom: 0;
right: 0;
}
You simply set the icons absolute and position it with top, right. ...