align text left of a block quote - html

Question

I have a blockquote and a paragraph that i'm trying o have the text align left of the blockquote like an img like here
http://www.ironspider.ca/graphics/alignment.htm
how would i do that?
<p>
skcaskckascksakcosaocksocksoososkososooososocsosokoskcoskosopapckpefjwjfoejfiewfoiewjfjwefjewfowefwefowefjwejfoewfowejfjewfoewfoewofejwofjejfiejiejfej
<blockquote>
For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
</blockquote>
okfoefjpowejfoewjfjewfjeiowfjoewjfowejfoewofewofjewjfoiewjfoiewfoiewiofjewo
</p>
like this

Answer 1

You should use CSS rather than the HTML align attributes, that are in your example.
Use float: right and give the block quote a width to suit your needs.
More about floats:
https://css-tricks.com/all-about-floats/
.float-right {
width: 50%;
float: right;
}
<p>
<blockquote class="float-right">
For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
</blockquote>
skcaskcka scksakc osaocksocks oososk osos ooo so socsosokosk coskos opapc kpe fjwjfoejfie wfoi ewjfj wefjewfo wefwefowef jwejfoewfo wejfjew foew foewofej wofjejfie jiejfej okfoef jpowejfoewjfjewfjeio wfjo ewjfowej foe wofe wofjew jfoiew jfoiew foiewiofjewo
</p>

Answer 2

Here you go buddy. Check out the following codepen link.
You basically need to use a css property called float. It specifies whether an element should float or not. Here you need float:right; to move it to the right. Give the amount of width you want to give and bingo. Its done !
Note:- You cannot use this property if your element is absolute positioned.
You can get more information on float here.
.blockquote-text{
float: right;
width: 30%;
background-color: #ddd;
}
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
<blockquote class="blockquote-text">
For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
</blockquote>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem IpsumLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
</p>