<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  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 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-sizing: border-box;
  padding: 40px;
}

.box {
  line-height: 30px;
  font-size: 20px;
  max-width: 500px;
  height: 90px;
  overflow: hidden;
  // animation: box 15s ease infinite;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

@keyframes box {
  0% {
    max-width: 500px;
  }
  50% {
    max-width: 280px;
  }
  100% {
    max-width: 500px;
  }
}

.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: 20px;
}

.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;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.