You could add the img in background and let the text in the html flux.

background: url('img/144ppi/Asset 2.png') 

Or you could group all the text in a container and give the absolute position to the container

<div class="ticket">
  <img src="img/144ppi/Asset 2.png" alt="" class="tickectImg img-fluid">
  <div class="ticket-content">
    <h1 class="heading">Rolex</h1>
    <p class="poolTitle">Pool # :
      <span class="poolNo">UC 001</span>
    </p>
    <h1 class="drawDateNo">2020 05 07</h1>
    <p class="drawDateTitle">Draw Date</p>
    <p class="tickectTitle align-middle">Ticket</p>
    <h3 class="ticketNo">123345</h3>
  </div>
</div>

You add:

.ticket {
position: relative;
 background-image: url("your image");}

then remove “image”

When the image is in background, you can add the following :

background: url('img/144ppi/Asset 2.png') no-repeat;
background-size: cover;
background-positition: center;

I want to position texts on the image so I used position (relative and absolute) approach.
This approach is working but is not responsive. I have to write media queries for all dimensions. Is there any better approach then this where I need not have to use media queries and it adjusts on its own in all situations (like if the content is more… or dynamic )

** Bootstrap **

<div class="ticket">
                    <img src="img/144ppi/Asset 2.png" alt="" class="tickectImg img-fluid">
                    <h1 class="heading">Rolex</h1>
                    <p class="poolTitle">Pool # :
                        <span class="poolNo">UC 001</span>
                    </p>
                    <h1 class="drawDateNo">2020 05 07</h1>
                    <p class="drawDateTitle">Draw Date</p>
                    <p class="tickectTitle align-middle">Ticket</p>
                    <h3 class="ticketNo">123345</h3>
                </div>

CSS

.ticket {
    position: relative;
}


.heading {
    position: absolute;
    top: 4px;
    left: 40px;
    font-size: 2rem;
    background: linear-gradient(90deg, #272769, #3950a2, #272769);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 600;
}

.poolTitle {
    position: absolute;
    top: 34px;
    left: 40px;
}

.drawDateNo {
    position: absolute;
    bottom: 18px;
    left: 40px;
    font-size: 2rem;
    background: linear-gradient(90deg, #272769, #3950a2, #272769);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 600;
}

.drawDateTitle {
    position: absolute;
    bottom: -6px;
    left: 40px;
}

.tickectTitle {
    position: absolute;
    right: 52px;
    top: 46px;
    writing-mode: vertical-rl;
    font-size: 20px;
}

.ticketNo {
    position: absolute;
    right: 18px;
    top: 20px;
    writing-mode: vertical-rl;
    font-size: 34px;
}