JSFiddle - React, Tailwind, and code Playground

by Gaurav Singh

HTML

<div class="content"> 
    <span id="texxts">
      <div class="cv">
        <p>
          Some text<br>
          Some more text<br>
          etc etc<br>
        </p>
        <p>
          <a href="mailto:test@example.com">test@example.com</a>
        </p>
        <p>
          Download
          &nbsp;&nbsp;&nbsp;&nbsp;<a href="example-eng.pdf">eng</a>
          &nbsp;&nbsp;&nbsp;&nbsp;<a href="example-deu.pdf">deu</a>
        </p>
      </div>
   </span>
   <span>
      <div class="photo">
         <img src="http://webjunction.net/images/avatars/default-avatar.png" alt="dummy">
      </div>
   </span>
</div>

CSS

.content {
        margin-bottom:2%;
        text-align: center;
    }
    .content span {
        display: inline-block;
        vertical-align: middle;
    }
    .content #texxts {
        border: 1px solid red;
        /* to show the centering */
    }
    body {
        font-family:'Lato', sans-serif;
        font-weight: 300;
        font-size: 150%;
        line-height: 1.6em;
    }
    .cv {
        display: table;
        margin: 0 auto;
    }
    .photo {
        float: right;
    }