Flex Grid

by quantum_leap123

HTML

<container class="container-for-content">
  <div class="flex-grid">
    <div class="icon">
      <img
        src="https://deshabpharmacy.com/shop/wp-content/uploads/2024/10/1728299498_test.jpg"
        alt="Icon"
      />
    </div>
    <div class="text">
      <h3>Title Text</h3>
      <p>This is some description text that aligns to the right of the icon.</p>
    </div>
  </div>
</container>

CSS

.container-for-content {
  display: flex; /* Use Flexbox for alignment */
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
  height: 100vh; /* Set full height for demonstration (or use a specific height) */
}

.flex-grid {
  max-width:500px;
  display: flex;
  align-items: center; /* Vertically center align items */
  gap: 1rem; /* Space between icon and text */
}

.icon {
  flex-shrink: 0; /* Prevent the icon from shrinking */
  width: 50%; /* Set a fixed width for the icon */
  height: 50%; /* Set a fixed height for the icon */
}

.icon img {
  max-width: 100%;
  height: auto; /* Ensure the icon is responsive */
}

.text {
  display: flex;
  flex-direction: column; /* Stack title and description */
  justify-content: center; /* Vertically align the text content */
}

.text h3 {
  margin: 0; /* Remove default margin from headings */
  font-size: 1.25rem; /* Adjust font size for the title */
}

.text p {
  margin: 0.5rem 0 0; /* Add some spacing to the paragraph */
  font-size: 1rem; /* Adjust font size for the paragraph */
  line-height: 1.5; /* Improve readability */
}