Why can't I components display side by side?-CodePudding

Why I have added a display: inline this statement, my components or can't display side by side?

 
 
 
<meta charset="utf-8" & gt; 
 Document 
<style> 
Nav {
Background - color: lightgray; height: 40px; 
} 
P {display: inline; } 
</style> 
<script SRC="https://bbs.csdn.net/topics/js/vue.js" & gt; </script> 
<script SRC="https://bbs.csdn.net/topics/js/vue-router.js" & gt; </script> 
 
<body> 
 
 
 
 
  
 
 
<script> 
Var sidebar1={
The template: ` 
  The left navigation bar a & lt;/p> 
 
` 
} 
Var com1={
The template: ` 
  The main content a & lt;/p> 
 
` 
} 
Var sidebar2={
The template: ` 
  The left navigation bar 2 & lt;/p> 
 
` 
} 
Var com2={
The template: ` 
  The main content 2 & lt;/p> 
 
` 
} 

Const router=new VueRouter ({
Routes: [
{
Path: '/', 
Components: {
Default: sidebar1, 
Main: com1 
} 
}, {
Path: '/page', 
Components: {
Default: sidebar2, 
Main: com2 
} 
} 
] 
}) 

New Vue ({
El: '# app, 
The router 
}) 
</script>

This is I want to achieve the effect of