Having trouble aligning HTML and CSS elements

I am trying to align these two elements on my website. This is my code:

`<span class="location">
   <span class="dedicated-box">                 
      <div class="col-xs-4 col-sm-3 col-md-1 col-lg-1 col-xl-1 dedicated-img">
          <a href=${item.link}>
             <span>
                <img src=${item.imgSrc} alt=${"Dedicated Servers in " + item.name}>
             </span>
           </a>
           <div><p class="locationOf center-block">${item.name}</p></div>
         </div>
      </span>
   </span>`

This is my css code:

.dedicated-img {
    border: solid 0px #000;
    padding: 10px;
    margin: 14px;
    -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
    width: 200px;
    height: 90px;
    
}

.dedicated-img p {
    width: auto;
    display: inline;
    background-color: transparent;
    color: #00a63f;


}
.dedicated-img img {
    padding: 1px;
    display: block;
    max-width: 40%;
    border: solid 1px #000;
}

this is what it currently looks like: Current I want to align the text in front of the flag in the box and fill 50% of the right side of the box with some background color. Like this New