timeline css: horizontal divs

static/timeline.css

@@ -1,13 +1,20 @@
+body{ width: max-content;}
+
+div#body{ width: max-content;}
+
 .mw-parser-output{
-	position: left top;
-	display: hidden;
+	/*! position: left top; */
+	/*! display: hidden; */
+	/*! display: inline; */
+	/*! vertical-align: top; */
 }
 
+.mw-parser-output > p{
+display: inline-block;
+}
 
 .content {
 	border-style: solid 1px black;
-	transform: rotate(90deg);
-	transform-origin: right top;
 	background-color: red;
 	color: #444;
 	cursor: pointer;
@@ -24,26 +31,23 @@
 	width: 20vw;
 	height: 80vw;
 	overflow-y: auto;
-	overflow-x: hidden; 
-	transform: rotate(-90deg) /*translateY(-100px)*/;
-	transform-origin: right top;
-
+	overflow-x: hidden;
 }
 
 .event {
 	text-align-last: auto;
-    height: 10vw;
-	transform: rotate(90deg);
-	transform-origin: right top;
 	font-family: Arial;
 	font-size: 10px;
-	padding-top: 5vw;
-	padding-left: 5vw;
+/* 	padding-top: 5vw; */
+	 padding-left: 5vw;
+	display: inline-block;
+	width:400px;
+	vertical-align: top;
 }
 
 .thumbborder {
 /*	display: none;*/
-	width: 20%;
+	width: 30%;
 	height: auto;
 }
 
@@ -86,6 +90,4 @@ border: none;
 .axis-x div, .axis-y {
 text-align: center;
 font-weight: bold;
-}
-
-
+}