<div class="flex-split">
    <div class="flex-split-left">
      <div class="flex-split-image">
        <img src="http://codeat.it/images/andrea.jpg" />
      </div>
      <h3>Andrea Barghigiani</h3>
      <p>Etc etc etc</p>
      <a href="http://skillsandmore.org">Vieni a trovarci</a>
    </div><!-- .flex-split-left -->
    <div class="flex-split-right">
<div class="flex-split-image">
        <img src="http://codeat.it/images/eugenio.jpg" />
      </div>
      <h3>Eugenio Petull&aacute;</h3>
      <p>Etc etc etc</p>
      <a href="http://skillsandmore.org">Vieni a trovarci</a>
    </div>
</div>
.flex-split {
	display:flex;
	flex-direction:column;
  height: 100vh; //Per tt l'altezza della pagina
  
  //Sistemo i figli se in mobile
  > div {
    display:flex;
    flex-direction:column;
    
    padding-top: 30px;
    
    img{
      width: 200px;
      height: 260px;
    }
  }
}

.flex-split-left{ background-color: #F4511E;}
.flex-split-right{ background-color: #8E24AA;}
a{ 
  color: #fff; 
  font-weight: bold; 
  text-decoration: none;
  
  &:visited, &:hover{ text-decoration: underline; }
}
/* Split screen attivo soltanto sopra i 48em */
@media all and (min-width:48em) {
	.flex-split {
		flex-direction: row;

    //Divido la porzione in 2
    > div{ 
      justify-content: center;    
      text-align: center;
      width: 50%; 
    }
	}
}
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.