docs(Search): update layout for search example to accommodate code

[crashuniverse]

Fake data used in a pre tag in search example makes content overflow
& leaves a place for improvement. The example at SUI doesn't face
such problems because the state is not displayed in examples.

I made the following layout decisions to box in the content well and not break existing conventions:

1. Use a Segment to contain pre like button#usage-attached-events
2. Have a column with combinations of 6 & 10, and 8 & 8 based on how wide the content of search results need to be displayed.

[welcome]

💖 Thanks for opening this pull request! 💖

Here is a list of things that will help get it across the finish line:

• Run yarn lint locally to catch formatting errors. This will fix some errors automatically, commit and push any changes.
• Run yarn test locally to catch errors. This ensures all components still behave as they should.
• Run yarn start to run the doc site locally and try a few pages, ensuring everything is in good working order.
• Include tests when adding/changing behavior.

We get a lot of pull requests on this repo, so please be patient and we will get back to you as soon as we can.

[codecov-io]

Codecov Report

Merging #2948 into master will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff           @@
##           master    #2948   +/-   ##
=======================================
  Coverage   99.78%   99.78%           
=======================================
  Files         161      161           
  Lines        2760     2760           
=======================================
  Hits         2754     2754           
  Misses          6        6

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update caee404...747b05d. Read the comment docs.

[welcome]

Congrats on merging your first pull request! 🎉🎉🎉

[levithomason]

Released in [email protected].