Semantic Basic Template

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/semantic.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/semantic.min.js"></script>
<br>
<div class="ui unstackable centered padded grid contentGrid">
    <div class="row">
      <div class="ten wide column no-padding " style="background-color: red">
        <div class="sixteen wide column box">
        a
        <p>
        a2
        </p>
        <div>
        a3
        </div>
        <p>
        a4
        </p>
        </div>
        <div class="ten wide column box" style="background-color: green">
        bgkjhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
        </div>      
        </div>
      <div class="five wide column box">C</div>
    </div>
    <div class="row">
      <div class="five wide column box">d</div>
      <div class="five wide column box">e</div>
      <div class="five wide column box">f</div>
    </div>
  </div>

CSS

.box {
  border: 1px solid blue;
}

.no-padding {
 padding: 0 !important; 
}

.row {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}