To achieve the same behavior as the example code, one can remove the use of the table, td, and tr tags and replace them with divs. The desired behaviors include:
- Content1 text wrapping within column1 when the page width decreases.
- Column2 having a minimum width equal to the content2 width, which in this case is 120px.
Check out the JSFiddle for this code here.
See the example code below:
.container {
width: 100%;
border: 1px solid black;
}
.column1 {
width: 65%;
border: 1px solid green;
vertical-align: top;
}
.column2 {
width: 35%;
border: 1px solid red;
vertical-align: top;
}
.content2 {
width: 120px;
border: 1px solid orange;
}<div class="container">
<div class="column1">
<div class="content1">I am content I am content I am content I am content</div>
</div>
<div class="column2">
<div class="content2">Hello Hello</div>
</div>
</div>