JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper top">
  <div class="block-1">
    <p><span>ddfsfsdsfds</p>
    <p>fdsfsdfs.</p>
    <p>dfsdfdsfds.</p>
  </div>
  <div class="block-2"><img src="images/136147555-e1329752650296-287x300.jpg" alt="136147555-e1329752650296-287x300" width="287" height="300"></div>
 
</div><!-- End wrapper --> 
<div class="wrapper top">
<div class="block-100pc">
block-100pc
</div>
</div>

CSS

body {
    background: #F2F2F2;
}
.top {
    margin-top: 200px;
}
.wrapper {
    position: relative;
    display: block;
    margin-right: auto;
    margin-left: auto;
    width: 980px;
}
.block-1 {
    float: left;
    box-sizing: border-box;
    padding: 20px;
    width: 60%;
    text-align: justify;
    background-clip: border-box;
    background: #fff;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.block-1 span {
    color: #124191;
    font-weight: bold;
}
.block-2 {
    float: right;
    overflow: hidden;
    box-sizing: border-box;
    width: 35%;
    padding: 20px;
    background-clip: border-box;
    background: #fff;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    text-align: justify;
}
.block-100pc {
    overflow: hidden;
    box-sizing: border-box;
    width: 100%;
    padding: 20px;
    background-clip: border-box;
    background: #fff;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    text-align: justify;
    clear: both;
    background: red;
}