Is there a way to make materialize css card-panel the same width on different content size?

Question

<div class="container">
  <div class="row">
    <div class="col s12 m6 l6">
      <div class="card-panel">
        <i class="material-icons green-text medium">eco</i>
        <h5 class="gray-text text-darken-4">Our Mission</h5>
        <p class="center-align ">
          <span>To improve health, functioning and wellbeing of children especially the ones living with disability by creating awareness
            on importance of nutrition and healthy eating.</span> </p>
      </div>
    </div>
    <div class="col s12 m6 l6">
      <div class="card-panel">
        <i class="material-icons light-green-text text-darken-1 medium">visibility</i>
        <h5 class="gray-text text-darken-4">Our Vision</h5>
        <span class="center-align"> NPCD Tanzania vision is To have well-nourished and healthy children including the ones with disability within and outside our communities.</span>
      </div>
    </div>
  </div>
</div>

`

the first image shows the actual code and the second shows the output where the div size are not the same

Answer 1

This can be done using flex-box css property. I have removed the container, row and other grid classes. In the result, you can see both card-panel fit properly which have same height and width with different content.

.flexbox {
  display: flex;
  overflow: hidden;
}
.flexbox .col {
  flex: 1;
  background: red;
  margin: 10px;
  padding: 20px;
}

body {
  padding: 20px;
}

<div>
  <div class="flexbox">
    <div class="col">
      <div class="card-panel">
        <i class="material-icons green-text medium">eco</i>
        <h5 class="gray-text text-darken-4">Our Mission</h5>
        <p class="center-align ">
          <span>To improve health, functioning and wellbeing of children especially the ones living with disability by creating awareness
            on importance of nutrition and healthy eating.</span> </p>
      </div>
    </div>
    <div class="col">
      <div class="card-panel">
        <i class="material-icons light-green-text text-darken-1 medium">visibility</i>
        <h5 class="gray-text text-darken-4">Our Vision</h5>
        <span class="center-align"> NPCD Tanzania vision is To have well-nourished and healthy children including the ones with disability within and outside our communities.</span>
      </div>
    </div>
  </div>
</div>