JSFiddle - React, Tailwind, and code Playground

by Tìm ở đây Khoá học CNTT

HTML

<h1>Flexible Boxes</h1>

<div class="flex-container">
  <div class="box">Box 1 - Đây là một số văn bản để đảm bảo rằng nội dung thực sự cao. Đây là một số văn bản để đảm bảo rằng nội dung thực sự cao. Đây là một số văn bản để đảm bảo rằng nội dung thực sự cao.</div>
  <div class="box">Box 2 - Chiều cao dựa vào Box 1.</div>
</div>

<p>Cố gắng thay đổi kích thước cửa sổ trình duyệt để xem bố cục linh hoạt</p>
<p><strong>Lưu ý:</strong> Flexbox không được hỗ trợ trong Internet Explorer 10 hoặc các phiên bản cũ hơn.</p>

CSS

.flex-container {
  display: flex;
  flex-wrap: nowrap;
  background-color: DodgerBlue;
}

.flex-container .box {
  background-color: #f1f1f1;
  width: 50%;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}