placing <button> tag inside <span> tag is right way of placement

Question

i have requirement where i need to display text and button in one box. i have placed button tag inside span which has text and button

  inside span tag
  +-------------------+
  | text here         |
  |                   |    
  | <button> tag here |
  +-------------------+

my question is the right approach having button inside span. as just learned span is inline element and it can have only text, images etc..

What is the difference between HTML tags <div> and <span>?

Answer 1

You can of course use CSS to render the span as a block element, or even an inline-block if that is what you need.

.yourSpanClass {
    display: block;
}

.yourSpanClass {
    display: inline-block;
}

Though, i'd advice you to simply use a div if you have access to the HTML.

Supported browsers: http://caniuse.com/inline-block