<Tab.Container id="left-tabs-example" defaultActiveKey="first">
  <Row>
    <Col sm={3}>
      <Nav variant="pills" className="flex-column">
        <Nav.Item>
          <Nav.Link eventKey="first">Geography</Nav.Link>
        </Nav.Item>
        <Nav.Item>
          <Nav.Link eventKey="second">People and Society</Nav.Link>
        </Nav.Item>
        <Nav.Item>
          <Nav.Link eventKey="second">Government</Nav.Link>
        </Nav.Item>
      </Nav>
    </Col>
    <Col sm={9}>
      <Tab.Content>
        <Tab.Pane eventKey="first">
        <div>
        <strong>Map: </strong>
        <p>
        <img src="https://cdn.britannica.com/51/4551-050-98D9E63B/Syria-map-boundaries-cities-locator.jpg" width="100%"/>
        </p>
        </div>
          <div>
          <strong>Location: </strong><p>Middle East, bordering the Mediterranean Sea, between Lebanon and Turkey</p>
          </div>
          <div>
          <strong>Geographic coordinates: </strong><p>35 00 N, 38 00 E</p>
          </div>
        </Tab.Pane>
        <Tab.Pane eventKey="second">
          <Sonnet />
        </Tab.Pane>
      </Tab.Content>
    </Col>
  </Row>
</Tab.Container>