Each ResponsiveColumn has display: inline-block, but it happened to me that I needed to use display: inline-table.
Here is the code to show you what I mean by using the classic Row and Column:
<Section>
.....
<Row>
<Column>
<Section className="inline-block max-w-[900px]"> <-- Problem resolved by changing to inline-table
<Row>
<Column className="bg-red-500">
<Text className="">
{"{{message}}"}
</Text>
</Column>
</Row>
</Section>
<Section className="inline-table w-6"></Section>
<Section className="inline-table w-[28%]">
<Row>
<Column>
IMAGE
</Column>
</Row>
</Section>
</Column>
</Row>
.....
</Section>
With inline-block the first red column (table) takes the width of its content (wrong):

With inline-table the first column (table) stretches to fill the remaining space (desired result):

Proposal
Add a new property to ResponsiveColumn to control content streching.
Something like this:
<ResponsiveColumn strechContent={true|false}>
Each
ResponsiveColumnhasdisplay: inline-block, but it happened to me that I needed to usedisplay: inline-table.Here is the code to show you what I mean by using the classic
RowandColumn:With
inline-blockthe first red column (table) takes the width of its content (wrong):With
inline-tablethe first column (table) stretches to fill the remaining space (desired result):Proposal
Add a new property to
ResponsiveColumnto control content streching.Something like this:
<ResponsiveColumn strechContent={true|false}>