One thing + 3 factors+ DYN full card

by abhishek_soni

HTML

<div class="contains-all">

  <div class="main-container">
    <div class="main-card">
      <div class="first-line">
        <span class="first-left">
          <span class="test-name">Longer Acid : </span>
          <span class="test-result">23.4 mg/dl</span>
        </span>
        <span class="first-right">
          <span class="test-range">40-100mg/dl</span>
        </span>
      </div>


      <div class="slider">Text here - like this one is a big text, maybe not, but well then lets make sure it is. But it is not a good thing to end a sentence with an preposition.But it is not a good thing to end a sentence with an preposition.</div>

      <div class="slider">SLIDER HERE</div>


    </div>
  </div>
  
  

  <div class="main-container">
    <div class="main-card2">
      <div class="first-line">
        <span class="card-title">Causes : </span>
      </div>

      <div class="icon-text">
        <img class="causes-icon" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5c/Olympic_rings_without_rims.svg/1200px-Olympic_rings_without_rims.svg.png">
        <span class="icon-texty">THIS IS THE TEXT.</span>
        <span class="icon-texty-border"></span>
      </div>

      <div class="icon-text">
        <img class="causes-icon" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5c/Olympic_rings_without_rims.svg/1200px-Olympic_rings_without_rims.svg.png">
        <span class="icon-texty">THIS IS THE TEXT.</span>
        <span class="icon-texty-border"></span>
      </div>


      <div class="icon-text">
        <img class="causes-icon" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5c/Olympic_rings_without_rims.svg/1200px-Olympic_rings_without_rims.svg.png">
        <span class="icon-texty">THIS IS THE TEXT.</span>
      </div>
    </div>
    <div class="main-card2">
      <div class="first-line">
        <span class="card-title">Diet and Lifestyle tips : </span>
      </div>

      <div class="icon-text">
        <img...

CSS

body {
  font-size: 12px;
}

.contains-all {
  width: 794px;
  height: 1122px;
  background-color: red;
}

.main-container {
  display: flex;
}


.main-card {
  margin: 2.5%;
  padding: 2.5%;
  background-color: green;
  border-radius: 5px;
}

.first-line {
  display: flex;
}

/* .first-left {
  margin-right: auto;
} */

.first-right {
  margin-left: auto;
}


.main-card2 {
  width: 50%;
/*   border: 1px solid black;
   */  margin: 2.5%;
  padding: 2.5%;
  background-color: #f6f6f6;
  border-radius: 5px;
}

.causes-icon {
  padding: 20px;
  height: 30px;
  width: 30px;
}

.icon-text {
  display: flex;
  flex-direction: row;
  align-items: center;
}



.icon-texty {
  color: grey;
  display: flex;
  justify-content: start;
  width: 100%;
}

.icon-text4 {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}



.icon-texty4 {
  color: grey;
  display: flex;
  justify-content: start;
  width: 100%;
}


.main-card3 {
  width: 50%;
  margin: 2.5%;
  padding: 2.5%;
  background-color: yellow;
  border-radius: 5px;
}

.main-card4 {
  width: 50%;
  border: 1px solid black;
  margin: 2.5%;
  padding: 2.5%;
  background-color: purple;
  border-radius: 5px;
}

.factor-title {
  display: flex;
}

.main-card5 {
  width: 100%;
  margin: 2.5%;
  padding: 2.5%;
  background-color: green;
  border-radius: 5px;
}