Creating 2 Div Under Each Other On CSS

I need to split my 2 block, on 4 blocks. I mean calibrate,connect,train,analyze needs to be separately, but in my code calibrate and connect are in one block, and train and analyze

Solution 1:

First of all, you should start at preparing correct layout structure.
As you mentioned we need [ SIDEBAR ] [ ANIMATION ] [ SIDEBAR ] all inline.

So let's try.

.container > div {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5em;
  color: #ffeead;
}

html, body {
  box-sizing: border-box;
  background-color: #ffeead;
  height: 100%;
  padding: 10px;
  margin: 0px;
}

* {
    box-sizing: border-box;
}

.container > div:nth-child(1n) {
  background-color: #96ceb4;	
}

.container > div:nth-child(3n) {
  background-color: #88d8b0;
}

.container > div:nth-child(2n) {
  background-color: #ff6f69;
}


.container {
    height: 100%;
    display: grid;
    grid-template-columns: minmax(200px, 1fr) repeat(4, minmax(200px, 1fr)) minmax(200px, 1fr);
    grid-template-areas: 's1 a a a a s2'
}

.animation {
    grid-area: a;
}

.block1, .block2 {
    align-items: center;
    justify-content: center;
    background: #ffad3d;
    display: flex;
    flex: 1;
    height: 100%;
    margin: 0 5px;
    padding: 10px;
}

.left-sidebar, .right-sidebar {
    padding: 10px;
}

.left-sidebar {
    grid-area: s1;
}

.right-sidebar {
    grid-area: s2;
}

<div class='container'>
    <div class='left-sidebar'>
        <div class='block1'>block 1</div>
        <div class='block1'>block 2</div>
    </div>
    <div class='animation'>ANIMATION</div>
    <div class='right-sidebar'>
        <div class='block1'>block 1</div>
        <div class='block1'>block 2</div>
    </div>
</div>

It's our starting point, from now you can go on with the things you need, e.g. sidebar content or animation.

Is that what you were looking for?

Solution 2:

.div-wrap {
  display: flex;
  align-items: center;
  flex-flow: column nowrap;
  justify-content: space-between;
  text-align: center;
}

:root { --time: 24; }

.div-txt {
  width: 300px;
  margin: 20px auto;
  padding: 10px 5px 3px;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}
.div-txt img {
  width: 36px;
  height: 36px;
}
.div-txt p.label {
  margin-top: 5px;
  color: #0065de;
  font: bold 16px 'Arial';
  animation-duration: calc(var(--time) * 1s);
  animation-iteration-count: infinite;
  animation-name: color-change;
}

.div-wrap-txt:nth-child(1) .div-txt:nth-child(1) p.label { animation-delay: 0s; }
.div-wrap-txt:nth-child(1) .div-txt:nth-child(2) p.label { animation-delay: calc(var(--time) / 4 * 1s); }
.div-wrap-txt:nth-child(3) .div-txt:nth-child(1) p.label { animation-delay: calc(var(--time) / 2 * 1s); }
.div-wrap-txt:nth-child(3) .div-txt:nth-child(2) p.label { animation-delay: calc(var(--time) / 1.33 * 1s); }

.div-img {
  position: relative;
  height: 600px;
  width: 600px;
}
.div-img img {
  position: absolute;
  top: 0;
  left: 50%;
  display: block;
  transform: translateX(-50%);
  opacity: 0;
  animation-duration: calc(var(--time) * 1s);
  animation-iteration-count: infinite;
  animation-name: fade;
}

.div-img img:nth-child(1) { animation-delay: 0s; }
.div-img img:nth-child(2) { animation-delay: calc(var(--time) / 8 * 1s); }
.div-img img:nth-child(3) { animation-delay: calc(var(--time) / 4 * 1s); }
.div-img img:nth-child(4) { animation-delay: calc(var(--time) / 2.66 * 1s); }
.div-img img:nth-child(5) { animation-delay: calc(var(--time) / 2 * 1s); }
.div-img img:nth-child(6) { animation-delay: calc(var(--time) / 1.6 * 1s); }
.div-img img:nth-child(7) { animation-delay: calc(var(--time) / 1.33 * 1s); }
.div-img img:nth-child(8) { animation-delay: calc(var(--time) / 1.14 * 1s); }

@keyframes color-change {
  0%, 25%, 100% { color: black; }
  1%, 24% { color: #ED5F8A; }
}
@keyframes fade {
  0%, 20%, 100% { opacity: 0; z-index: auto; }
  1%, 99% { z-index: 1; }
  8%, 12% { opacity: 1; }
}

@media all and (min-width: 1170px) {
  .div-wrap { flex-flow: row nowrap; justify-content: space-around; }
}
@media all and (max-width: 600px) {
  .div-img { max-width: 100%; }
}

body { margin: 0; padding: 0; }

<div class="div-wrap">
  <div class="div-wrap-txt">
    <div class="div-txt">
      <img src="img/svgforlia/connect.svg">
      <p class="label">Connect</p>
      <p>Wear Lia device on the shoulders, <br>turn on it and connect application <br>with device.</p>
    </div>
    <div class="div-txt">
      <img src="img/svgforlia/calibrate.svg">
      <p class="label">Calibrate</p>
      <p>After connection, set up calibration to <br>help device remember your upright <br>and slouch positions.</p>
    </div>
  </div>
  <div class="div-img">
    <img src="//picsum.photos/600/600?image=998" title="Image 1">
    <img src="//picsum.photos/600/600?image=535" title="Image 2">
    <img src="//picsum.photos/600/600?image=593" title="Image 3">
    <img src="//picsum.photos/600/600?image=219" title="Image 4">
    <img src="//picsum.photos/600/600?image=841" title="Image 5">
    <img src="//picsum.photos/600/600?image=1011" title="Image 6">
    <img src="//picsum.photos/600/600?image=1016" title="Image 7">
    <img src="//picsum.photos/600/600?image=976" title="Image 8">
  </div>
  <div class="div-wrap-txt">
    <div class="div-txt">
      <img src="img/svgforlia/train.svg">
      <p class="label">Train</p>
      <p>Train your posture anytime you want, <br>set up daily goal to improve gradually <br>your posture.</p>
    </div>
    <div class="div-txt">
      <img src="img/svgforlia/analyze.svg">
      <p class="label">Analyze</p>
      <p>Statistics let you track and analyze <br>the progress you’ve made from first <br>training to the last.</p>
    </div>
  </div>
</div>