How to add a tweetline to the right side of a timeline?

Question

I would like to add a tweetline widget to my page, at the right side of the about section. Although I achieve it, it has an strage behavior since sometimes it works perfectly:

And sometimes, just when I save the .css and .html file it looks like this:

Any idea of why this is happening and how to fix the aforementioned issue?. This is the CSS:

        #about {
            padding:40px 20px;
            overflow:hidden;
        }

        .twitter-timeline, .timeline-section {
            float:left;
        }
        /* Timeline Section */
        .timeline-section {
            width:490px;
            padding-right:60px;
        }

        .timeline {
            margin-bottom: 30px;
        }
        .timeline li {
            margin-bottom:20px;
        }
        .timeline li .timelineUnit {
            line-height:17px;
            margin-left:0px;
            color: #444;
            font-size:13px;
            border-left:1px solid /*mainColor*/#000000;
            padding-left:15px;
        }
        .timeline li .timelineUnit .timelineDate {
            line-height:17px;
            color:/*mainColor*/#000000;
            font-size:14px;
            margin-left:10px;
            font-weight: normal;
            padding:2px 6px;
            float:right;
        }
        .timeline li .timelineUnit h4 {
            line-height:24px;
            font-size:15px;
            color: #444;
        }
        .timeline li .timelineUnit h5 {
            line-height:18px;
            font-size:13px;
            color: #999;
        }
        .timeline li .timelineUnit p {
            color: #666;
            font-size:12px;
            margin-top:5px;
        }

Answer 1

If you post the entirety of that pages code I can better customize my answer but this should just be an issue of defining the width and using floats to arrange your content. I gave your .timeline-section a max-width: 50% and float: left and the .twitter-timeline I gave a max-width: 50% and float: right. It works in the below fiddle. Let me know if you still have an issue.

https://jsfiddle.net/o7sxoton/1/

.timeline-section {
  max-width: 50%;
  float: left;
}

.twitter-timeline {
  max-width: 50%;
  float: right;
}

<!-- Menu -->
<nav class="menu">
  <ul class="tabs">
     <li class="tmenu"><a href="#profile" class="tab-profile"><i>&#x60;</i>Profile</a></li>
     <li class="tmenu"><a href="#about"><i>&#xe035;</i>About</a></li>
     <li class="tmenu"><a href="#resume"><i>&#x3a;</i>Resume</a></li>
     <li class="tmenu"><a href="#research"><i>&#xe14c;</i>Research</a></li>                        
     <li class="tmenu"><a href="#portfolio"><i>&#xe1c1;</i>Portfolio</a></li>
     <li class="tmenu"><a href="#contact"><i>&#x21;</i>Contact</a></li>
  </ul>
  <a class="prev" id="menu-prev" href="#">&#xe073;</a>
  <a class="next" id="menu-next" href="#">&#xe076;</a>
</nav>
<!-- /Menu -->

<!-- About -->
<section id="about">
   <div class="timeline-section">
   <!-- Timeline for Employment  -->   
     <h3 class="main-heading">Employment</h3>   
       <ul class="timeline">
        <li>
          <div class="timelineUnit">
            <h4>Manager<span class="timelineDate">2010 - Present</span></h4>
            <h5>Ligula Non Lectus</h5>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscingVivamus sit amet ligula non lectus cursus egestas. Cras erat lorem, fringilla quis sagittis in, sagittis inNam leo tortor Nam leo tortor Vivamus.</p>
          </div>
        </li>
        <li>
          <div class="timelineUnit">
            <h4>Web Developer<span class="timelineDate">2008 - 2010</span></h4>
            <h5>Lorem ipsum</h5>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing Vivamus sit amet ligula non lectus. amet ligula non lectus Lorem ipsum dolor sit amet, consectetur adipiscing</p>
          </div>
         </li>
         <li>
          <div class="timelineUnit">
            <h4>Web Designer<span class="timelineDate">2007</span></h4>
            <h5>Consectetur adipiscing </h5>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing Vivamus sit Vivamus sit. Vivamus sit.. consectetur adipiscing Vivamus sit. Vivamus sit </p>
          </div>
         </li>
         <div class="clear"></div>
       </ul>
       </div>
     </section>
                            
<a class="twitter-timeline"  href="https://twitter.com/auser" data-widget-id="blablblabla">Tweets by @user.</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
                           

UPDATED Thanks for updating your question. Forgive the crude design of the fiddle but I wanted you to see how the elements are lining up. What was pushing your twitter element down was the section element. By applying a max-width: 60% to the #about id we are telling that entire container to not go past 60% of the viewport (no need to add it to the timeline section class unless you want that element smaller than the actual section tag) allowing space for your twitter element to float properly on the right. I also added a display: inline-block to that element so it would eventually line up with the twitter element.

Secondly I gave the twitter-timeline element a max-width: 30% (feel free to adjust these values as you see fit and remember to account for your padding in the calculation) floated that element right and also applied a display: inline-block. I just gave the element a set height, width, and background color so you could see its now aligned to the right of your main column. I hope this answers your question.

see the updated fiddle below https://jsfiddle.net/kdec97vr/1/