-2

I want to wrap the two sections and wrap them side by side so that they will look like this.

wrap text side by side

<div class="row">


  <span class="pull-left"><strong>5 Dolor et’s face it – no matter how excited you are about a new project or priority in your life, there will always be days when your
     motivation lags. Days when – despite all the progress you’ve made in the past – it just sounds easier to sit on the couch playing video
     </strong></span>

  <span>Let’s face it – no matter how excited you are about a new project or priority in your life, there will always be days when your motivation lags. Days when – despite all
    the progress you’ve made in the past – it just sounds easier to sit on the couch playing video games than to buckle down and crank out the work needed to meet your goals.
          If you don't like your destiny, don't accept it.</span>

</div>
Bhargav Rao
  • 50,140
  • 28
  • 121
  • 140
user3667343
  • 9
  • 1

2 Answers2

4

Have a look at this example

 .insert { float:right;width:50%; padding:30px;}
<p>
CSS (Cascading Style Sheets) is a style sheet language used for describing the look and formatting of HTML (Hyper Text Markup Language), XML (Extensible Markup Language) documents and SVG elements including (but not limited to) colors, layout, and fonts.CSS (Cascading Style Sheets) is a style sheet language used for describing the look and formatting of HTML (Hyper Text Markup Language), XML (Extensible Markup Language) documents and
<span class="insert">
 CSS (Cascading Style Sheets) is a style sheet language used for describing the look and formatting of HTML (Hyper Text Markup Language), XML (Extensible Markup Language) documents and SVG elements including (but not limited to) colors, layout, and fonts.
</span>
SVG elements including (but not limited to) colors, layout, and fonts.CSS (Cascading Style Sheets) is a style sheet language used for describing the look and formatting of HTML (Hyper Text Markup Language), XML (Extensible Markup Language) documents and SVG elements including (but not limited to) colors, layout, and fonts.CSS (Cascading Style Sheets) is a style sheet language used for describing the look and formatting of HTML (Hyper Text Markup Language), XML (Extensible Markup Language) documents and SVG elements including (but not limited to) colors, layout, and fonts.
look and formatting of HTML (Hyper Text Markup Language), XML (Extensible Markup Language) documents and SVG elements including (but not limited to) colors, layout, and fonts.CSS (Cascading Style Sheets) is a style sheet language used for describing the look and formatting of HTML (Hyper Text Markup Language), XML (Extensible Markup Language) documents and SVG elements including (but not limited to) colors, layout, and fonts.
</p>
mplungjan
  • 169,008
  • 28
  • 173
  • 236
grinmax
  • 1,835
  • 1
  • 10
  • 13
0

Rather than having to place the inset text in the middle of your body text, you can float a zero width box to the to right to move down your inset text. You can then put the inset text first, and use float and clear to put it in the right place.

.row::before{
  content:'';
  float:right;
  height:100px;
}
.inset {
  float:right;
  clear:right;
  width:60%;
  font-style:italic;
  margin-left:10px;
}
<div class="row">

  <div class="inset"><strong>5 Dolor et’s face it – no matter how excited you 
are about a new project or priority in your life, there will always be days when 
your motivation lags. Days when – despite all the progress you’ve made in the 
past – it just sounds easier to sit on the couch playing video</strong></div>

  <div class="main"><p>Let’s face it – no matter how excited you are about a
new project or priority in your life, there will always be days when your 
motivation lags. Days when – despite all the progress you’ve made in the past – 
it just sounds easier to sit on the couch playing video games than to buckle down 
and crank out the work needed to meet your goals. If you don't like your destiny, 
don't accept it.</p><p>Let’s face it – no matter how excited you are about a new 
project or priority in your life, there will always be days when your motivation 
lags. Days when – despite all the progress you’ve made in the past – it just 
sounds easier to sit on the couch playing video games than to buckle down and 
crank out the work needed to meet your goals. If you don't like your destiny, 
don't accept it.</p></div>

</div>
Alohci
  • 78,296
  • 16
  • 112
  • 156