Как выровнять изображение вправо в div с другими элементами

Question

У меня есть div с несколькими встроенными элементами, но элемент справа - это изображение, которое должно быть выровнено прямо в этом div.

html

<div class='row'>
  <div class='col-md-12'>
    <div class='bank_tribune_speler' data-spelerid='77'>
      <div class='positie'>K</div>
      <img src='img/clubs/shirt.png' class='bank_tribune_shirt' alt='shirt'> 
      <div class='bank_tribune_naam_info'>
        <span class='ellipsis font-weight-bold club_margin_top'>Name</span>
      </div>
      <div class='bank_tribune_wissel'>
        <div class='bank_tribune_wissel_icon'></div>
      </div>
    </div>
  </div>
</div>  

css

.bank_tribune_speler {
  display: flex;
  padding-top: 8px;
  padding-left: 10px;
  border: solid 1px #b5b5b5;
  margin-top: 10px;
}

.bank_tribune_shirt {
  height: 50px;
  width: 50px;
  margin-left: 12px;
  margin-top: -5px;  
}

.positie {
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  height: 40px;
  line-height: 40px;
  position: relative;
  text-align: center;
  width: 40px;
}

.bank_tribune_naam_info {
  font-size: 20px;
  line-height: 22px;
  margin-left: 10px;
  margin-top: -3px;
}

.bank_tribune_wissel_icon {
  background: url("../img/wissel4.jpg");
  height: 40px;
  margin-right: 15px;
  width: 48px;
}

См. JSFiddle

Я хочу, чтобы изображение с красной и зеленой стрелкой выровнялось по правому краю в div с серой рамкой

Я попробовал float: правильно, выравнивание текста: правильно, но пока не повезло ....: - (

Есть идеи, как этого добиться?

С уважением,

Арье

Answer 1

Я достиг этого, используя float: right ....; -)

См. JSFiddle

body {
  font-family: 'Hind', sans-serif;
}

.bank_tribune_speler {
  padding-top: 8px;
  padding-left: 10px;
  border: solid 1px #b5b5b5;
  margin-top: 10px;
  height: 50px;
}

.bank_tribune_shirt {
  height: 50px;
  width: 50px;
  margin-left: 12px;
  margin-top: -5px;  
  float: left;
 }

.positie {
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  height: 40px;
  line-height: 40px;
  position: relative;
  text-align: center;
  width: 40px;
  float: left;
}

.linie-positie-keeper {
  background-color: red;
}

.bank_tribune_naam_info {
  font-size: 20px;
  line-height: 22px;
  margin-left: 10px;
  margin-top: -3px;
  float: left;
}

.club_margin_top {
  margin-top: 0.8rem!important;
}
.font-weight-bold {
  font-weight: 700!important;
}

.bank_tribune_wissel {
  height: 40px;
  width: 40px;
  margin-right: 15px;
}

.float-right {
  float: right!important;
}