如何让垂直居中的文本环绕浮动图像

*{box-sizing: border-box;}
.box{
    font-family: Arial;
    font-size: 16px;
    line-height: 22px;
    width: 100%;
    max-width: 480px;
    min-height: 100px;
    background-color: rgb(148, 206, 203);
    padding: 15px;
    margin: 15px auto 15px auto;
    color: #333;
    border-radius: 8px;
}
.img{
    width: 100px;
    height: 100px;
    min-width: 100px;
    max-width: 100px;
    max-height: 100px;
    background: coral;
    margin-left: 12px;
    float: right;
    border-radius: 4px;
}
.txt{
    position: relative;
    min-height: inherit;
    padding: 0;
    text-align: justify;
}
.box-flex{
    display: flex;
    justify-content: space-between;
}
.box-flex .img{
    order: 1;
}
.box-flex .txt{
    padding: 0;
    align-self: center;
    min-height: auto;
}

<div class="box box-flex">
    <div class="img"></div>
    <div class="txt">
        If small amout of text (use .box-flex)
    </div>
</div>
<div class="box">
    <div class="img"></div>
    <div class="txt">
        Lorem ipsum dolor sit amet conse ctetur adipis icing elit. Unde adipisci soluta beatae minima, dolores atque voluptas, explicabo mollitia, sunt alias nihil dolo ribus veritatis perfe rendis quib usdam error exerci ationem quia conseq uuntur eos digni ssimos sed veniam? Rerum saepe qui sed corporis volupt atibus soluta quo eaque. Quidem recu sandae dolorum nesciunt Rerum saepe qui sed.
    </div>
</div>