JSFiddle - React, Tailwind, and code Playground

by hongquanhak

HTML

<div class="text-container">
  <p class="text">
    Đây là một đoạn văn bản dài cần để hiển thị cùng một nút. Khi văn bản
    gặp nút, nó sẽ xuống dòng tiếp theo và tiếp tục điền đầy đủ chiều rộng
    của khối.
  </p>
  <button class="">Button</button>
</div>

CSS

.text-container {
  position: relative; /* Đặt vị trí tương đối để nút có thể định vị tuyệt đối */
  border: 1px solid #000;
  padding: 10px;
  max-width: 500px; /* Giới hạn chiều rộng tối đa */
}

.text {
  margin: 0;
  display: inline; /* Hiển thị như phần tử nội tuyến */
}

.resize-button {
  position: absolute; /* Vị trí tuyệt đối để nút luôn ở góc phải trên */
  top: 0; /* Đặt nút ở đỉnh */
  right: 0; /* Đặt nút ở phía bên phải */
  margin: 10px; /* Tạo khoảng cách từ viền */
}

.text-container::after {
  content: ""; /* Tạo nội dung giả */
  display: block; /* Đặt thành phần thành khối */
  margin-top: 30px; /* Đảm bảo văn bản không tràn qua nút */
}