[EUI] Fix temporary selectable horizontal card workaround (#145932)

## Summary

closes #145508

This workaround was added in 7832378. A non-temporary fix was pushed up in 8.7 (#144845), but rather than create a new EUI backport just for this issue, I'm opting to fix the 8.6-only workaround.

### Before

<img src="https://user-images.githubusercontent.com/61860752/202394082-c82006af-1492-4537-a354-8e2f60b4b45e.png" alt="">

### After

<img width="909" alt="" src="https://user-images.githubusercontent.com/549407/203149130-a5cc0a69-d736-4e89-9d26-6e5e870238b4.png">


### Checklist

- [x] Any UI touched in this PR is usable by keyboard only (learn more about [keyboard accessibility](https://webaim.org/techniques/keyboard/))
- [x] This renders correctly on smaller devices using a responsive layout. (You can test this [in your browser](https://www.browserstack.com/guide/responsive-testing-on-local-server))
- [x] This was checked for [cross-browser compatibility](https://www.elastic.co/support/matrix#matrix_browsers)

x-pack/plugins/canvas/public/components/datasource/datasource_selector.js

@@ -19,7 +19,7 @@ export const DatasourceSelector = ({ onSelect, datasources, current }) => {
     padding-bottom: 60px;
     position: relative;
 
-    button {
+    & > button {
       position: absolute;
       left: 0;
       right: 0;

x-pack/plugins/security_solution/public/detections/components/rules/select_rule_type/index.tsx

@@ -108,7 +108,7 @@ export const SelectRuleType: React.FC<SelectRuleTypeProps> = ({
     padding-bottom: 60px;
     position: relative;
 
-    button {
+    & > button {
       position: absolute;
       left: 0;
       right: 0;