如何使文字环绕重新定位的图像？

Question

我想在文字块的左边叠加两张图片。这是图像的HTML：

<div class="ari-barak-images">
  <img alt="Image" src="ari-barak.jpg" class="ari-barak-image"/>
  <img alt="Image" src="AFA-FINALIST.png" class="afa-finalist" />
</div>

和CSS：

.afa-finalist {
    float: left;
    height: auto;
    width: auto;
    max-height: 140px;
    position: absolute;
    left: 120px;
    top: 100px;
    transform: rotate(30deg);
  }
.ari-barak-images {
    position: relative;
  }
.ari-barak-image {
    display: block;
    float: left;
    height: auto;
    width: auto;
    max-height: 300px;
    padding: 10px 10px 10px 0px;
  }

尽管文字确实环绕在书本图片的右侧，但仍被奖品图片覆盖，如下所示：

我怀疑这与我制作了奖牌图像position: absolute有关。我怎样才能使文本紧紧包裹在该图像上？