Выровняйте ссылку / кнопку справа и снизу контейнера, в котором есть и другие элементы - нельзя использовать flex

Question

Выровняйте ссылку / кнопку справа и снизу контейнера, в котором есть и другие элементы. Я не могу использовать flex.

Я нашел здесь некоторые решения, большинство из которых используют относительное положение по отношению к родителю и абсолютное по отношению к детям, но я не смог выровнять, как хотел;

Я не могу изменить класс .right и .button, мне нужно установить этот путь, потому что это просто компонент / раздел.

Хотите:

• ссылки view1, view2 располагаются справа от div.right и имеют то же основание, что и .thumb (3 изображения)

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

.right {
  display: table-cell;
}

.button {
  display:inline-block;
}

thumbs::after {
  display: table;
  clear: both;
  content: "";
}

.thumb { 
  float:left;
  margin-left: 5px;
}

<div class="right">
    <img src="https://loremflickr.com/100/50" />
    <p class="text"> Capital remain stand tree answer next fast. Religious our life tax common interesting other. Lay organization model position game.</p>
        <div class="thumbs">
            <div class="thumb">
                <img src="https://loremflickr.com/50/50" />
            </div>
            <div class="thumb">
                <img src="https://loremflickr.com/50/50" />
            </div>
            <div class="thumb">
                <img src="https://loremflickr.com/50/50" />
            </div>
        </div>
        <a href="" class="button">View1</a>
        <a href="" class="button">View2</a>
</div>

Answer 1

Попробуйте это

    .right {
display: table-cell;
}
.row {
    position: relative;
 }
.button {
display:inline-block;
position: absolute;
bottom: 0;
right: 0;
}

.thumbs {
    content: "";
    clear: both;
    display: table;
}
thumbs::after {
    display: table;
    clear: both;
    content: "";
}

.thumb { 
float:left;
margin-left: 5px;
}

<div class="right">
            <img src="https://loremflickr.com/100/50" />
            <p class="text"> Capital remain stand tree answer next fast. Religious our life tax common
                interesting other. Lay organization model position game.</p>
            <div class="row">
            <div class="thumbs">
                <div class="thumb">
                    <img src="https://loremflickr.com/50/50" />
                </div>
                <div class="thumb">
                    <img src="https://loremflickr.com/50/50" />
                </div>
                <div class="thumb">
                    <img src="https://loremflickr.com/50/50" />
                </div>
            </div>
                <a href="" class="button">View Products</a>
        </div>
    </div>