Tell us what’s happening:
The text is not aligning correctly. Can someone help me please.
I thought the text was supposed to display vertical by default, but it is not aligning vertically.
Your code so far
Html code
<div id ='root'>
</div>
Css code
.container {
display: grid;
grid-template-columns: 50px 50px;
}
.left {
width: 600%;
height: 90vh;
position: relative;
}
.right {
width: 1000%;
height: 200vh;
border: 1px solid;
overflow: auto;
position:relative;
left: 300px;
text-align: center;
}
#editor {
width: 100%;
height: 90%;
}
Js code
const initialMarkdown = '### Headers # Header 1 ## Header 2 ### Header 3 #### header 4 ##### header 5 ####### header 6 ### list - list item one -list item two - list item three ### links [Freecodecamp](https://www.freecodecamp.org/) ### Text Decorations *italic* **bold** ***bold and italic*** ### Images '
class App extends React.Component {
constructor(props) {
super(props)
this.state = {
markdown: initialMarkdown
}
}
handleChange = e => this.setState({markdown: e.target.value })
render() {
return (
<div>
<h1>Markdown Previewer</h1>
<div className='container'>
<div className='left'>
<textarea id='editor' value={this.state.markdown} onChange={this.handleChange}/>
</div>
<div className='right'>
<div id='preview' dangerouslySetInnerHTML={{__html: marked(this.state.markdown)}}/></div>
</div>
</div>
)
}
}
ReactDOM.render(<App/>, document.getElementById('root'))
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.132 Safari/537.36.
Link to the challenge: