Here is my code:
.container{
padding: 2rem;
}<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
clifford: '#da373d',
}
}
}
}
</script>
</head>
<body>
<section class="container mx-auto py-3">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non mauris ligula. Vestibulum ut porta dolor. Fusce viverra turpis a lorem iaculis vehicula. Integer blandit in eros in molestie. Nunc et vehicula odio, at lobortis dui. Aliquam erat volutpat. Aliquam a turpis vel nisi pellentesque semper sit amet condimentum nibh. Nullam fringilla vitae mauris vel semper.
</p>
</section>
<section>
<!-- Section 1 -->
<div class="flex flex-col md:flex-row">
<!-- Image Section -->
<div class="w-full md:w-1/2 h-64 md:h-auto">
<img src="https://picsum.photos/600/400" alt="Description" class="w-full h-full object-cover">
</div>
<!-- Text Section -->
<div class="w-full md:w-1/2 flex flex-col justify-center">
<div class="container mx-auto">
<h2 class="text-sm uppercase tracking-widest text-gray-500">This is the subtitle</h2>
<p class="mt-4 text-lg leading-relaxed text-gray-800">This is the title of the section and this title could be one or two sentences and might be long around this</p>
<a href="#" class="mt-6 inline-block text-blue-500 hover:text-blue-700 underline">Read More</a>
</div>
</div>
</div>
<!-- Section 2 -->
<div class="flex flex-col md:flex-row-reverse">
<!-- Image Section -->
<div class="w-full md:w-1/2 h-64 md:h-auto">
<img src="https://picsum.photos/600/400" alt="Description" class="w-full h-full object-cover">
</div>
<!-- Text Section -->
<div class="w-full md:w-1/2 flex flex-col justify-center">
<div class="container mx-auto">
<h2 class="text-sm uppercase tracking-widest text-gray-500">This is the subtitle</h2>
<p class="mt-4 text-lg leading-relaxed text-gray-800">This is the title of the section and this title could be one or two sentences and might be long around this</p>
<a href="#" class="mt-6 inline-block text-blue-500 hover:text-blue-700 underline">Read More</a>
</div>
</div>
</div>
</section>
</body>
</html>Here in the image you can see that, green line represents the main container, and there in another section I am trying to allow image the all space on the left, however, on the right the text is not being aligned with parent container. One way could be adding padding but i believe that won’t be responsive because the container would have the max width based on different screen size.
What is the the best way to get the result here.