画像とあしらい文字を一塊にして塊で動かせるようにしたいです(現在レスポンシブでディスプレイ幅を調節する度にあしらいがずれてしまう)

前提

「質問」
レスポンシブでディスプレイ幅を変更した際も画像の裏側のあしらい文字が動かないようにする方法をご教示いただきたいです。よろしくお願いいたします！！

「現在」
→画像の裏側にあしらい文字を配列しているのですが、レスポンシブでディスプレイ幅を変えるたびにずれてしまいます。
現在は、paddingで文字の位置を調節しているのですが、何か他に良い方法はないでしょうか？

実現したいこと

レスポンシブで横幅のサイズを変えるたびにpaddingを調節しなくてもよいように、
画像と文字(作品名が入る等)、あしらい文字(05)の3つの要素を一塊にしたい。

該当のソースコード

現在は以下のようにコードを組んでおります。

HTML

<a class="works-item" href="works-template.html"> <div class="asirai">05</div> 　　　<p class="works-img"><img src="img/works.jpg" alt="画像名を入れる" /></p> <p class="works-name">作品名が入る</p> 　 <p class="works-info">Banner Design</p> </a>

css

.works-img img { border: 1px solid #e6e6e6; position: relative;} .asirai { font-family: "BIZ UDゴシック"; font-size: 90px; color: #fff; opacity: 0.3; position: absolute; margin-top: 190px; margin-left: 240px;}

補足情報（FW/ツールのバージョンなど）

構築環境：Google　chrome / visual　studio　code