I was using React.js to build a component.

When I type p element and span element, the span element will go into the new line

not in the same line.

I have already use CSS display:inline-block and it doesn't work.

What should I do to make my span and p on the same line?

My website on localhost:3000:

[![enter image description here](https://i.stack.imgur.com/8y66J.png)](https://i.stack.imgur.com/8y66J.png)

What I want is 

> 
> XXX XX18:00~XX06:00
> 
> 
> XXXXXXXXXXX
> 
> 
> 25℃~30℃ XXXX:30%
> 
> 
> 

My index.js:

```
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import Card from './Card';
import * as serviceWorker from './serviceWorker';
import 'tachyons';

ReactDOM.render(<Card />, document.getElementById('root'));
serviceWorker.unregister();

```

My card.js

```
import React from 'react';
import './Card.css';

const Card = () =>{
    return(
        <div>
             <p>嘉義縣</p><span>今日18:00~明日06:00</span>
             <p>陰時多雲短暫陣雨或雷雨</p>
             <p>25℃~30℃</p><span>降雨機率:30%</span>
        </div>      
     );
   }
   export default Card

```

My card.css:

```
   p{
     dispaly:inline-block;
    }

```