One thing only - ng dynamic

Causes / Diet / Risk / Symptoms / Food Sources

by abhishek_soni

HTML

<div class="contains-all">

<div class="main-container">
  <div class="main-card2">
    <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">SLIDER HERE</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.</div>

  </div>

  <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.</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.</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.</span>
    </div>
  </div>
</div>

<div class="main-container">
  <div class="main-card2">
    <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">SLIDER HERE</div>

   ...

CSS

body {
  font-size: 12px;
  
  /* width: 794px;
  height: 1122px; */
}

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

.main-container {
  display: flex;
}


.main-card {
  width: 50%;
  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%;
  margin: 2.5%;
  padding: 2.5%;
  background-color: pink;
  border-radius: 5px;
}

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

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

.icon-texty {
  color: grey;
  display: flex;
  justify-content: center;
  border-right: 2px solid grey;
  width: 100%;
}

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