JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="contact-holder col-sm-10 col-sm-offset-1">
<button class="add">Add text</button>
        <h2>Departement</h2>
				
				<!--Newly added clearfix-->
        <div class="clearfix">
                <div class="image-container">
                    <img src="https://cdn.lincraft.com.au/media/catalog/product/cache/1/thumbnail/135x/9df78eab33525d08d6e5fb8d27136e95/2/2/22482617.jpg">
                    <p class="user-name">Name LastName</p>
                    <p class="user-title">Title</p>
                    <a class="user-mail" href="mailto:[email protected]">[email protected]</a>
                </div>         
                <div class="image-container">
                    <img src="https://cdn.lincraft.com.au/media/catalog/product/cache/1/thumbnail/135x/9df78eab33525d08d6e5fb8d27136e95/2/2/22482617.jpg">
                    <p class="user-name">Name LastName</p>
                    <p class="user-title addhere">Title</p>
                    <a class="user-mail" href="mailto:[email protected]">[email protected]</a>
                </div>                  <div class="image-container">
                    <img src="https://cdn.lincraft.com.au/media/catalog/product/cache/1/thumbnail/135x/9df78eab33525d08d6e5fb8d27136e95/2/2/22482617.jpg">
                    <p class="user-name">Name LastName</p>
                    <p class="user-title">Title</p>
                    <a class="user-mail" href="mailto:[email protected]">[email protected]</a>
                </div>                  <div class="image-container">
                    <img src="https://cdn.lincraft.com.au/media/catalog/product/cache/1/thumbnail/135x/9df78eab33525d08d6e5fb8d27136e95/2/2/22482617.jpg">
                    <p class="user-name">Name LastName</p>
                    <p class="user-title">Title</p>
                    <a class="user-mail" href="mailto:[email protected]">[email protected]</a>
                </div>           ...

CSS

.contact-holder{
    height: 500px;
    width: 605px;
}
.image-container {
    width: 139px;
    float: left;
    min-height: 195px;
    margin: 0em 1%;
    font-size: 15px;
}

.image-container img {
    width: 135px;
    height: 135px;
}

.user-name {
    margin: 0px 0 1px 0;
    word-wrap: break-word;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.9em;
    color: #464646;
    font-weight: bold;
}

.user-title {
    font-size: 0.8em;
    margin: 0px 0 1px 0;
    word-wrap: break-word;
    font-family: Arial, Helvetica, sans-serif;
    color: #464646;
}
.user-mail {
    color: #00536E;
    font-size: 9px;
}

.clearfix:before, .clearfix:after {
    content: "";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}


.inline{
	display:block;
	letter-spacing: 0;
	font-size: 0;
}

h2 {
    font-family: Arial, Helvetica, sans-serif;
    margin: 0 0 1em 0;
    font-size: 1.2em;
    color: #464646;
}

.helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

JavaScript

$('.add').click(function() {
  $('.addhere').text('This is a long text that messes up my divs This is a long text that messes up my divs This is a long text that messes up my divs This is a long text that messes up my divs This is a long text that messes up my divs This is a long text that messes up my divs');
});