How to make p tag and a button side by side?

HTML-CSS
1

https://jsfiddle.net/jo4d3cLy/

As both is block element?

Thanks!

2

You could do that using or flex-box or css-grid, check one of the two, or review them and expand on what you know if you have already done the course on them

3

You mean this?
https://jsfiddle.net/t2fnq31v/

4

Can’t answer you now - totally impossible to open on mobile

5

a div with <div class="style=display: flex;">here the p tag and button</div>

6

why don’t you put that in the style tag?

But, it may be correct m

7

Hi, in order to make those elements side by side, you dont need another element to wrap them and then display that parent element as a flex or grid container. Instead, you only need to specify P tag to become inline-block element, so that button gets to its side. just like this “<p style="display:inline-block;”>" , cheers.

1 Like
8

https://jsfiddle.net/sorskode/13o28h0y/
Done. Check the link. I styled display property of p element to inline. Float and flex would have been great too but then you would need to put both the p tag and button in a parent container to control the width.

1 Like
9

I personally prefer the container method.

Makes reading DOM so much easier.

1 Like
10

@kerafyrm02, yea, it’s safe for something more serious except I think @bestdesign is just playing around with the code. Or am I wrong? @bestdesign

1 Like
11

Btw,. I would stay away from using float.