<div class="box">
<div class="box__more">
<div class="box__btn">еще</div>
</div>
Lorem ipsum dolor, sit amet consectetur adipisicing modi ea iste. Dignissimos accusamus saepe qui incidunt pariatur reiciendis architecto itaque quos, natus iusto molestiae cum error voluptate delectus placeat modi ea iste?
</div>
<div class="box">
<div class="box__more">
<div class="box__btn">Показать еще</div>
</div>
item item item item item item item item item item item item item item item item item item item item item item item item item item item item item item item
</div>
body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
min-height: 100vh;
gap: 30px;
}
.box {
line-height: 30px;
font-size: 20px;
max-width: 500px;
height: 60px;
overflow: hidden;
}
.box__more {
float: right;
height: 100%;
display: flex;
justify-content: center;
align-items: flex-end;
flex-wrap: wrap;
shape-outside: inset(calc(100% - 30px) 0 0 0);
margin-left: 5px;
}
.box__btn {
box-sizing: border-box;
padding: 0 5px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
text-align: center;
background-color: orange;
cursor: pointer;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.