Проблемы с выравниванием элементов HTML и CSS

Question

Я пытаюсь совместить эти два элемента на своем веб-сайте. Это мой код:

`<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>`

Это мой css код:

.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;
}

вот как он сейчас выглядит: Текущий Я хочу выровнять текст перед флажком в поле и заполните 50% правой стороны поля некоторым цветом фона. Как это Новое

Answer 1

.dedicated-img {
    display: flex;
    align-items: baseline;
    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;

<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>

Answer 2

попробуйте это и прокомментируйте весь стиль этого раздела, тогда вы легко поймете, в чем проблема ..

.dedicated-img {
    display:flex;        
}