.dot:hover{
        box-shadow: 0 15px 30px rgba(0,0,0,.5);
    }
    .dot{
        position: absolute;
        top: 30%;
        left: 25%;
        transform: translate(-50%,-50%);
        padding: 20px;
        box-sizing: border-box;
        background: #D3D3D3;
        border-radius: 4px;
        box-shadow: 0 5px 15px rgba(0,0,0,.5);
        display: flex;
        width: 600px;
        transition: .5s;
    }
    .dot .imgBx{
        width: 150px;
        flex: 0 0 150px;
    }
    .dot .imgBx img{
        max-width: 100%;

    }
    .dot .content{
        padding-left: 20px;
    }
    .dot .content p{
        text-align: justify;
    }
    
    .right{
        float: right;
        flex-wrap: wrap;
        flex-direction: column;
    }

<div class="right">
    <div class="dot">
        <div class="imgBx">
            <img src="{% static 'images/banner/bg.PNG' %}">
        </div>
        <div class="content">
            <p>Bangladesh's apparel exporters concerned as NBR firm on bond licencing</p>
        </div>
    </div>
    
</div>